更新记录

0.1.2.6（2021-10-19） 下载此版本

加入组件的全局样式

0.1.2.5（2021-04-06） 下载此版本

组件兼容性

0.1.2.4（2021-02-22） 下载此版本

更新flex样式不兼容

平台兼容性

uni-app

uploader

事件

用法

<Uploader preview-size="180rpx" :mutiple="true" :maxUpload="5" :file-list="fileList" @after-read="afterRead" @delete="onDelete" />

data() {
  return {
    fileList: [],
  }
},
methods: {
  afterRead(e) {
      // afterRead传过来的是一个中间文件对象
        const file = e

      uni.showLoading({
        title: '正在上传中...',
        mask: true
      });
      file.map(item => {
        uploadFile(item.path).then(res => {
            uni.hideLoading();
                // 上传完毕后按照后端服务器返回的数据来操作fileList
            //
            this.fileList.push(res)
        });
      })
  },
  // 上传到你的服务器
  uploadFile(path) {
    return new Promise(resolve => {
        uni.uploadFile({
          url: '', //你服务器上的url
          filePath: path,
          name: 'file',
          fileType: 'image',
          cloudPath: '',
          success: res => {
            console.log('uploadFile res ==> ', res)
            let data = JSON.parse(res.data);

            if (data.code == 1) {
              resolve(data.data);
            }
          },
          fail: (err) => {
               console.log('error ==>', err)
          }
        });
      });
  },
  handleImage(index) {
     this.fileList.splice(index)
  }
}

后端返回的res数据结构

请自行根据服务器返回的res操作fileList，请不要过分依赖该示例中的uploadFile方法，按需更改

code: 1
data: {
  base_url: "/uploads/images/user/20210205/aadb448bc83c18782b7503ce8006f95f.jpg",
  name: "K4GZIiUyXyvpa28f14c65f4b60913d5c4ce849ec905f.jpg",
  url: "xxxxxxx/uploads/images/user/20210205/aadb448bc83c18782b7503ce8006f95f.jpg"
}
debug: {request: {get: [], post: [],…}}
msg: "ä¸Šä¼ æ–‡ä»¶æˆåŠŸ"
show: 0
time: "0.043755"