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

1.  
   <uni-file-picker
2.  
   file-mediatype="all"
3.  
   v-model="fileList3"
4.  
   mode="grid"
5.  
   @select="select"
6.  
   @progress="progress"
7.  
   @success="success"
8.  
   @delete ="deletephoto"
9.  
   @fail="fail"
10.  
    ref="upload"
11.  
    limit="5"
12.  
    />
13.  
    </uni-file-picker>

组件代码

1.  
   // // 选择上传触发函数
2.  
   select(e) {
3.  
   // 根据所选图片的个数，多次调用上传函数
4.  
   let promises=[]
5.  
   for (let i = 0; i < e.tempFilePaths.length; i ) {
6.  
   const promise =this.uploadFiles(e.tempFilePaths,i)
7.  
   promises.push(promise)
8.  
   }
9.  
   Promise.all(promises).then(()=>{
10.  
     
11.  
    })
12.  
    },
13.  
    // 上传函数
14.  
    async uploadFiles(tempFilePaths,i){
15.  
    let that =this
16.  
    await uni.uploadFile({
17.  
    url: that.action, //后端用于处理图片并返回图片地址的接口
18.  
    filePath:tempFilePaths[i],
19.  
    name: 'file',
20.  
    header:that.header,
21.  
    success: res => {
22.  
    let data=JSON.parse(res.data) //返回的是字符串，需要转成对象格式
23.  
    if(data.code==200){
24.  
    that.form.attachment.push(data.data)
25.  
    if(i==tempFilePaths.length-1)
26.  
    this.form.attachment=JSON.stringify(this.form.attachment);
27.  
    }
28.  
    },
29.  
    fail: () => {
30.  
    console.log("err");
31.  
    }
32.  
    })
33.  
     
34.  
    },
35.  
    // 移出图片函数
36.  
    async deletephoto(){
37.  
    this.form.attachment = ''
38.  
    },

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

这篇好文章是转载于：学新通技术网