weui 扩展组件 mp-uploader 引入使用示例。

代码片段 https://developers.weixin.qq.com/s/l4ffFMmk7nyw

官方文档地址：

https://wechat-miniprogram.github.io/weui/docs/uploader.html

注意 组件文档 属性列表 delete 的描述中，在实际开发中，查看组件代码对比看设置是否有效哈。

show-delete="{{showDelete}}"

参考文档因没有示例可能会导致中途放弃。

引入该代码发现，selectFile、uplaodFile 事件无法绑定，因此需要在 onload 中加入绑定代码

 

  onLoad() {
    this.setData({
      selectFile: this.selectFile.bind(this),
      uplaodFile: this.uplaodFile.bind(this)
    })
  }

但是调用 组件的时候 ，经常返回  upload error {type: 3, errMsg: "upload file fail, urls not found"

只好通过下载 https://github.com/wechat-miniprogram/weui-miniprogram 代码，查看 组件源码

查看源码后，我这边尝试 使用 uplaodFile 函数使用成功。里面包含两种方式，一种是直接引入
{
  "usingComponents": {
    "mp-uploader": "weui-miniprogram/uploader/uploader"
  }
}

一种是下载组件后再引入
{
  "usingComponents": {
    "mp-uploader": "../../components/uploader/uploader"
  }
}

/*
uplaodFile 核心代码
*/

uplaodFile(files) {
    console.log('upload files', files)
    // 文件上传的函数，返回一个promise
    return new Promise((resolve, reject) => {


      // 成功示例
      setTimeout(() => {
        resolve({
          urls: files.tempFilePaths
        })
      }, 1000);


      // 组件成功代码
      //   if (json.urls) {
      //     const oldFiles = this.data.files
      //     json.urls.forEach((url, index) => {
      //         oldFiles[len + index].url = url
      //         oldFiles[len + index].loading = false
      //     })
      //     this.setData({
      //         files: oldFiles,
      //         currentFiles: newFiles
      //     })
      //     this.triggerEvent('success', json, {})
      // } 


      // 失败示例
      setTimeout(() => {
        reject('some error')
      }, 1000);
    })
  }

记住该组件的删除是通过 放大后再操作的