微信小程序mp-uploader上传多图至云开发存储（附普通云开发上传方式）

<mp-cells>
<mp-cell>
<mp-uploader 
	files="{{files}}"  
	max-count="{{maximgs}}" 
	max-size="{{10 * 1024 * 1024}}" 
	title="图片上传" 
	tips="最多上传三张图片"
	size-type="{{sizeType}}" 
	sourceType="{{sourceType}}" 
	delete="{{true}}" 
	select="{{selectFile}}" 
	upload="{{uplaodFile}}"
	binddelete="delimg"
	bindfail="uploadError" 
	bindsuccess="uploadSuccess" 
></mp-uploader>
</mp-cell>
</mp-cells>

// pages/default/default.js
const app = getApp()
Page({
  data: {
    //mp-uploader
    maximgs:5,//最大上传数
    files: [],  //上传组件绑定的文件urls
    sizeType: ['compressed'], //压缩上传,可以是['original', 'compressed']
    sourceType: ['album', 'camera'], //相册,或拍照
  },

  onLoad: function (options) {
    this.setData({
    	//通过bind(this)将函数绑定到this上,以后函数内的this就是指全局页面
    	//setdata以后,这两个函数就可以传递给mp-uploader了
      selectFile: this.selectFile.bind(this),  
      uplaodFile: this.uplaodFile.bind(this)
    })
  }, 
  
  //mpuploader选择图片时的过滤函数，返回true表示图片有效
  selectFile(files) {
    wx.showLoading({ title: '', })
    // 如果有大文件可以压缩一下
    // 返回false可以阻止本次文件上传
  },


  uplaodFile(files) {   
    // 图片上传的函数，必须返回Promise
    //Promise的callback里面必须resolve({urls})表示成功，否则表示失败
    return new Promise((resolve, reject) => {         
      const tempFilePaths = files.tempFilePaths;
      const that = this;
      let finished = {url:[]}  //本次上次成功的URL存入这个变量,被success方法的e.detail承接

      for (var i = 0; i < tempFilePaths.length; i++) {
        let filePath = tempFilePaths[i]  //原名
        let cloudPath = 'qyzj' + new Date().getTime() + '-' + i + filePath.match(/\.[^.]+?$/)[0]  //云存储文件名

        wx.cloud.uploadFile({
          filePath, cloudPath,

          //成功
          success: function (res) {
            if (res.statusCode != 200 && res.statusCode != 204 && res.statusCode != 205) reject('error')// 可能会有好几个200+的返回码，表示成功
            
            finished.url.push({url:res.fileID})     //成功一个存一个到本次上传成功列表
            //如果本次上传的文件都完成 或全局已经存满3张,resolve退出
            if (finished.urls.length === tempFilePaths.length || that.data.files.length +finished.urls.length == this.data.maximgs)
            resolve(finished)
          },

          //失败
          fail: function (err) { console.log(err) }
        })
      }
    })
  },

  uploadError(e) {
    console.log('upload error', e.detail)
    wx.hideLoading()
    this.setData({ error: "上传失败,可能有些照片过大" })
  },
  uploadSuccess(e) {
    console.log('upload success', e.detail)
    this.data.files=this.data.files.concat(e.detail.url)
    this.setData({files:this.data.files})
    wx.hideLoading()
  },

  //删除图片 detail为{index, item}，index表示删除的图片的下标，item为图片对象。
  delimg(e) {
    this.data.files.splice(this.data.files.findIndex(item => item == e.detail.item), 1)
  } 

})

普通方式：

<view>
<block wx:for="{{images}}" wx:for-item="src">
  <image  src="{{src}}"></image>           
</block>
<view bindtap="upload">上传</view>

upload(){
    let that = this;
    wx.chooseImage({//异步方法
        count: 9,//最多选择图片数量
        sizeType: ['original', 'compressed'],//选择的图片尺寸 原图，压缩图
        sourceType: ['album', 'camera'],//相册选图，相机拍照
        success(res) {
            //tempFilePaths可以作为图片标签src属性
            const tempFilePaths = res.tempFilePaths
            console.log("选择成功", res)

            for (let i = 0; i < tempFilePaths.length; i++) {//多个图片的循环上传
                wx.cloud.uploadFile({//上传至微信云存储
                    cloudPath: 'myImage/' + new Date().getTime() + "_" + Math.floor(Math.random() * 1000) + ".jpg",//使用时间戳加随机数作为上传至云端的图片名称
                    filePath: tempFilePaths[i],// 本地文件路径
                    success: res => {
                        // 返回文件 ID
                        console.log("上传成功", res.fileID)
                        that.setData({
                            images: res.fileID//获取上传云端的图片在页面上显示
                        })
                        wx.showToast({
                            title: '上传成功',
                        })
                    }
                })
            }

        }
    })
}