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

这篇具有很好参考价值的文章主要介绍了uniapp使用uni-file-picker上传组件实现多文件上传功能。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

<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 = ''
   },

选择以及发生请求代码，可以实现多文件上传功能文章来源地址https://www.toymoban.com/news/detail-504598.html

到了这里，关于uniapp使用uni-file-picker上传组件实现多文件上传功能的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！