微信小程序mp-uploader组件

1、uploader.wxml

<view class="page" data-weui-theme="{{theme}}">
    <view class="page__hd">
        <view class="page__title">Uploader</view>
        <view class="page__desc">上传组件</view>
    </view>
    <view class="page__bd">
        <mp-cells>
            <mp-cell>
                <mp-uploader bindfail="uploadError" bindsuccess="uploadSuccess" select="{{selectFile}}" upload="{{uplaodFile}}" files="{{files}}" max-count="5" title="图片上传" tips="图片上传提示"></mp-uploader> 
            </mp-cell>
        </mp-cells>
    </view>
</view>

2、uploader.json

{
  "usingComponents": {
    "mp-uploader": "weui-miniprogram/uploader/uploader",
    "mp-cells": "weui-miniprogram/cells/cells",
    "mp-cell": "weui-miniprogram/cell/cell"
  },
  "navigationBarTitleText": "uploader"

}

3、uploader.js

import CustomPage from '../../../base/CustomPage'

Page({
  onShareAppMessage() {
    return {
      title: 'uploader',
      path: 'page/weui/example/uploader/uploader'
    }
  },
  data: {
    files: [{
      url: 'http://mmbiz.qpic.cn/mmbiz_png/VUIF3v9blLsicfV8ysC76e9fZzWgy8YJ2bQO58p43Lib8ncGXmuyibLY7O3hia8sWv25KCibQb7MbJW3Q7xibNzfRN7A/0',
    }]
  },
  onLoad() {
    this.setData({
      selectFile: this.selectFile.bind(this),
      uplaodFile: this.uplaodFile.bind(this)
    })
  },
  chooseImage() {
    const that = this
    wx.chooseImage({
      sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
      sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
      success(res) {
        // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
        that.setData({
          files: that.data.files.concat(res.tempFilePaths)
        })
      }
    })
  },
  previewImage(e) {
    wx.previewImage({
      current: e.currentTarget.id, // 当前显示图片的http链接
      urls: this.data.files // 需要预览的图片http链接列表
    })
  },
  selectFile(files) {
    console.log('files', files)
    // 返回false可以阻止某次文件上传
  },
  uplaodFile(files) {
        console.log('upload files', files, this.data.files)
        var that = this;
        // 文件上传的函数，返回一个promise
        return new Promise((resolve, reject) => {
            const tempFilePaths = files.tempFilePaths[0];
            var token = wx.getStorageSync('token');
            wx.uploadFile({
                url: `${config.host}/oss/upload`, //仅为示例，非真实的接口地址
                filePath: tempFilePaths,
                header: {
                    'content-type': 'application/json',
                    Authorization: token
                },
                name: 'file',
                // formData: {
                //     token:
                // },
                success(res) { //上传成功
                    var data = (JSON.parse(res.data)).data;
                    //成功调用接口
                    //格式必须是resolve({ urls: [data] })
                    resolve({ urls: [data] });
                },
                fail(err) {
                    console.log(err)
                    wx.showToast({ title: '请求失败,请刷新后重试', icon: 'none' });
                    reject(err)
                }
            })
        })
    },
  uploadError(e) {
    console.log('upload error', e.detail)
  },
  uploadSuccess(e) {
    console.log('upload success', e.detail)
    //以下内容根据自己需求写就可以，我的是设置了一张图片的上传，所以写死了
    this.data.files = []
    this.data.files.push({ url: e.detail.urls[0] })
    this.setData({
        files: this.data.files
    })
    this.data.popupForm.images = this.data.files[0].url;
  }
})