评论

uploader组件示例代码

uploader组件示例代码

uploader组件文档说的很不清除,这里做了一个代码片段,有兴趣可以看看





/**
 * 这里使用到云函数,需要填写正确的云开发配置字段才可以正常使用
 * uploader组件主要就是两个方法removeImage,uploadFile,一个删除,一个上传,其他的可以暂时不考虑
 */


Page({
  data: {
      files: [
          {url:'http://n.sinaimg.cn/photo/transform/700/w1000h500/20200219/ca9a-iprtayz8150608.jpg'}
      ]
  },
  onLoad() {
      console.log(this);
      this.setData({
          uploadFile: this.uploadFile.bind(this)
          //这里需要绑定uploadFile函数,因为在uploader组件中会调用这个方法,不绑定的话,this会指向uploader组件中的this,但是uploader组件中没有这个方法,这个方法需要用户自定义
      });
  },
  removeImage:  async function ({detail}) {
      console.log(detail);
      this.data.files.splice(detail.index,1);//同步更新files字段数据
      await wx.cloud.deleteFile({//直接调用云函数删除
          fileList:[detail.item.url]
      });
  },
  uploadFile: async function (files) {
      console.log('upload files', files)
      let tempFilePaths = files.tempFilePaths;
      let arr=[];//保存最后返回的结果
      for (let i = 0; i < tempFilePaths.length; i++) {
         let {fileID}= await wx.cloud.uploadFile({
           //云存储中的文件名这里直接截取本地文件路径的一部分使用,方便
              cloudPath: 'images/'+tempFilePaths[i].match(/\w+\.\w+$/g)[0],
              filePath: tempFilePaths[i], // 文件路径
          });
          arr.push(fileID);
          //更新files字段
          this.data.files.push({
              url:fileID
          })
      }
      console.log(arr);
      return {urls:arr};
      //返回的格式是{urls:['xxx.jpg','xxx.jpg']}
  },
  uploadError(e) {
      console.log('upload error', e.detail)
  },
  uploadSuccess(e) {
      console.log('upload success', e.detail)
  }
});


https://developers.weixin.qq.com/s/28TTpgmR7UfQ

最后一次编辑于  02-20  
点赞 1
收藏
评论

1 个评论

登录 后发表内容