小程序中van-uploader组件加wx.uploadFile多文件上传

禅之乐

已于 2024-04-02 11:47:01 修改

阅读量473

点赞数 4

文章标签： javascript 前端服务器微信小程序

于 2024-04-02 11:44:00 首次发布

本文链接：https://blog.csdn.net/zhangjie9852/article/details/137264590

版权

本文详细描述了如何在微信小程序中使用van-uploader组件进行图片的多图上传，包括事件处理和文件处理逻辑，展示了WXML和JS代码片段。

摘要由CSDN通过智能技术生成

wxml：

<van-uploader  file-list="{{photo[child.key]}}" bind:after-read="afteruploadPhotoRead" data-name="{{child.key}}" use-before-read bind:before-read="beforeRead" bind:delete="deleteImg" data-type="{{child.key}}" preview-size="150rpx" preview-image preview-full-image max-count="{{child.num}}" multiple sizeType="compressed" isChoseType="{{true}}"></van-uploader>

JS：

afteruploadPhotoRead(e) {    
    const fileArr = e.detail.file.map(item=>item.url);//图片集 
    wx.showLoading({
      title: '上传中',
    })
    var that = this
    const uploadMultiple = (index) => {
      if (index >= fileArr.length) {
        // 所有文件上传完毕
        wx.showToast({
          title: '上传完成',
          icon: 'success',
          duration: 2000
        });
        return;
      }      
      const filePath = fileArr[index];
      wx.uploadFile({
        url: API_BASE_URL + 'common/weChat/uploadImage', // 你的上传API地址
        filePath: filePath,
        name: 'file', // 这里根据API的要求来定义    
        complete: function (res) {
          wx.hideLoading()
          if (res.statusCode == 200) {
            wx.showToast({
              title: '选择成功',
              icon: 'none',
            })
            var item = {
              url: "",
              name: "",
            }
            let type = e.currentTarget.dataset.type
            item.url = filePath;
            item.name = res.data;
            that.data.photo[type].push(item) 
            that.setData({
              [`photo.${type}`]: that.data.photo[type]
            })
            that.checkCompleteEnable()
          } else {
            wx.showToast({
              title: '选择失败',
              icon: 'error'
            })
          }
          uploadMultiple(index + 1);
        } 
      });
    };
    uploadMultiple(0); //执行上传
  },