uniapp使用uni-file-picker上传组件实现多文件上传功能

最新推荐文章于 2024-03-14 16:42:50 发布

皮卡丘biu

最新推荐文章于 2024-03-14 16:42:50 发布

阅读量1.5w

点赞数 3

文章标签： uni-app 前端 javascript

本文链接：https://blog.csdn.net/weixin_53802588/article/details/126396448

版权

<uni-file-picker
       file-mediatype="all"
          v-model="fileList3" 
          mode="grid" 
          @select="select" 
          @progress="progress" 
          @success="success" 
       @delete ="deletephoto" 
          @fail="fail"
       ref="upload"
       limit="5"
      />
     </uni-file-picker>

组件代码

// // 选择上传触发函数
    select(e) {
    // 根据所选图片的个数，多次调用上传函数
     let promises=[]
     for (let i = 0; i < e.tempFilePaths.length; i++) {
       const promise =this.uploadFiles(e.tempFilePaths,i)
       promises.push(promise)
      } 
       Promise.all(promises).then(()=>{
        
      })
           },
   // 上传函数
   async uploadFiles(tempFilePaths,i){
      let that =this
       await uni.uploadFile({
         url: that.action, //后端用于处理图片并返回图片地址的接口    
         filePath:tempFilePaths[i],    
         name: 'file', 
         header:that.header,
         success: res => {    
         let data=JSON.parse(res.data) //返回的是字符串，需要转成对象格式   
         if(data.code==200){ 
          that.form.attachment.push(data.data)
          if(i==tempFilePaths.length-1)
           this.form.attachment=JSON.stringify(this.form.attachment);
          }
         },   
        fail: () => {
         console.log("err");
        }   
       })   
       
   },
   // 移出图片函数
   async deletephoto(){
    this.form.attachment = ''
   },

选择以及发生请求代码，可以实现多文件上传功能