1）使用场景：

weui里面有很多组件，其中一个是上传组件，如果你有上传图片的需求，使用mp-uploader开发效率也快很多，也能减少代码包体。

2）效果图：

3）实现流程：

1. app.json配置useExtendedLib的weui功能
2. app.js初始化云开发（需保证已开放云开发功能）
3. 页面代码如下

// index.json
{
  "navigationBarTitleText": "上传图片",
  "usingComponents": {
    "mp-uploader": "weui-miniprogram/uploader/uploader"
  }
}

// index.wxml
<mp-uploader title="投诉凭证" max-count="3" files="{{files}}" upload="{{uploadFn}}" binddelete="uploadDelect" 
 bindsuccess="uploadSuccess">
</mp-uploader>

// index.js
let that = this;
Page({
  data: {
    files: [],
    async uploadFn(e) {
      let urls = [];
      for (let i = 0; i < e.tempFilePaths.length; i++) {
        urls.push(await that.upLoadImg(e.tempFilePaths[i]));
      }
      return { urls };
    },
  },
  onLoad() {
    that = this;
  },
  uploadDelect(e) {
    let files = this.data.files;
    files.splice(e.detail.index, 1);
    this.setData({ files });
  },
  uploadSuccess(e) {
    let files = this.data.files;
    e.detail.urls.forEach((url) => {
      files.push({
        url,
      });
    });
    this.setData({
      files,
    });
  },
  async upLoadImg(filePath) {
    let cloudPath = `mini/${new Date().getTime()}.png`;
    let { fileID } = await wx.cloud.uploadFile({
      cloudPath,
      filePath,
    });
    return this.fileIDToHttps(fileID);
  },
  // 图片地址: fileID 转 https
  fileIDToHttps(url) {
    let res = url;
    if (url.indexOf("cloud://") === 0) {
      const first = url.indexOf(".");
      const end = url.indexOf("/", first);
      res =
        "https://" +
        url.slice(first + 1, end) +
        ".tcb.qcloud.la/" +
        url.slice(end + 1, url.length);
    }
    return res;
  },
});

4）注意点：

注意upload上传函数是在data里的函数，该函数的this指向为上传图片对象，非页面实例。

5）相关联文章：

1. weui内置扩展库使用步骤
2. weui官方文档
3. 小程序上传图片相关内容（1/2）