小程序云开发使用WeUI上传图片组件

小程序云开发使用WeUI上传图片组件，上传图片存储数据库

首先导入组件
wxml:

<view class="page">
    <view class="weui-cells weui-cells_after-title">
        <view class="weui-cell">
            <view class="weui-cell__bd">
                <textarea class="weui-textarea" placeholder="请输入文章内容" style="height: 3.3em" />
                <view class="weui-textarea-counter">0/200</view>
            </view>
        </view>
    </view>
    <view class="page__bd">
        <mp-cells>
            <mp-cell>
                <mp-uploader bindfail="uploadError" bindsuccess="uploadSuccess" select="{{selectFile}}" upload="{{uplaodFile}}" files="{{files}}" max-count="9" title="" tips=""></mp-uploader>
            </mp-cell>
        </mp-cells>
    </view>
</view>

json:

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

js:

Page({
    data: {
        files: [{
            url: 'http://mmbiz.qpic.cn/mmbiz_png/VUIF3v9blLsicfV8ysC76e9fZzWgy8YJ2bQO58p43Lib8ncGXmuyibLY7O3hia8sWv25KCibQb7MbJW3Q7xibNzfRN7A/0',
        }, {
            loading: true
        }, {
            error: true
        }]
    },
    onLoad() {
        this.setData({
            selectFile: this.selectFile.bind(this),
            uplaodFile: this.uplaodFile.bind(this)
        })
    },
    chooseImage: function (e) {
        var that = this;
        wx.chooseImage({
            sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
            sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
            success: function (res) {
                // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
                that.setData({
                    files: that.data.files.concat(res.tempFilePaths)
                });
            }
        })
    },
    previewImage: function(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)
        // 文件上传的函数，返回一个promise
        return new Promise((resolve, reject) => {
            setTimeout(() => {
                reject('some error')
            }, 1000)
        })
    },
    uploadError(e) {
        console.log('upload error', e.detail)
    },
    uploadSuccess(e) {
        console.log('upload success', e.detail)
    }
});

因为上传多张图片要多次调用云上传接口，所以在promise中要判断是不是最后一张上传完毕，是最后一张上传完毕才可以，值得注意的是：resolve()里面的参数，这里多张图片上传完需要拼接一下

promise中处理具体代码：

return new Promise((resolve, reject) => {
        const db = wx.cloud.database()
        // console.log('upload files', files);
        let filesData = files.tempFilePaths;
        this.setData({
            arrurls:[]
        })
        var object = {};
        const that = this;
        for (let i = 0; i < filesData.length; i++) {
        const filePath = filesData[i];
        const name = 'veer-'+parseInt(Math.random() * 100000000);
        const cloudPath = name + filePath.match(/\.[^.]+?$/)[0]
        wx.cloud.uploadFile({
          cloudPath,
          filePath,
          success: res => {
						// console.log('[上传文件] 成功：', res);
						that.setData({
							arrurls: that.data.arrurls.concat(res.fileID)
						});
						object['urls'] = that.data.arrurls;
					
						if(that.data.arrurls.length == filesData.length){
							console.log(object);
							resolve(object)
						}
          //   _this.setData({
          //     upimgData: _this.data.upimgData.concat(res.fileID)
          //   })
          },
          fail: res => {
            console.error('[上传文件] 失败：', res)
          //   wx.showToast({
          //     icon: 'none',
          //     title: '上传失败',
          //   })
          },
          complete: () => {
            wx.hideLoading()
          }
        })
      }
       
      })

这里绿色部分是每上传一张图片就添加到数组中，在添加到promise回调中，红色部分判断是不是最后一张图片，是的话就执行promise回调

测试成功: