-- 创造无限可能

uview 1.x版本u-upload上传多张图片

2024-02-22 16:11:12
1246 人浏览 0 人点赞
有用,点赞支持一下
<u-upload 
        :file-list="picList" 
        :action="url" 
        :before-upload="beforeUpload" 
        :before-remove="beforeRemove" 
    ></u-upload>

js:

    beforeUpload(index, list) {
      this.picList = []
      // console.log('list',list);

      let i = 0;
      list.map(async item => {
        this.picList.push({
          url: item.url
        })

        if(i == index){
            let result = await this.uploadFilePromise(item.url);
            console.log(666,result);

            let data = JSON.parse(result)

            //保存图片
            this.order.car_check_img.push(data.data.img)
        }

        i++;
      })
      console.log('照片列表',this.picList);
    },

    // 上传图片
    uploadFilePromise(url) {
      return new Promise((resolve, reject) => {
        uni.uploadFile({
          url: this.apiUrl + "/upload/imageOne", // 仅为示例,非真实的接口地址
          filePath: url,
          name: "file",
          formData: {
            typeEnum: "IMAGE",
          },
         header: {
             'X-CSRF-TOKEN': token.getToken('TOKEN') //自行定义token,根据接口要求是否需要加上
         },
          success: (res) => {
            resolve(res.data);

          },
        });
      });
    },

    //移除图片
    beforeRemove(index, fileList){

         // 确保索引在有效范围内
        if (index >= 0 && index < this.order.car_check_img.length) {
            // 使用 splice 方法移除 this.order.car_check_img 中的对应项
            this.order.car_check_img.splice(index, 1);
        }

        // 如果需要,您还可以从 picList 中移除对应的项
        // 假设 fileList 和 picList 是同步的,并且 fileList[index] 是要移除的文件
        if (index >= 0 && index < this.picList.length) {
            this.picList.splice(index, 1);
        }
    }