H5 中uni-file-picker 自定义上传，怎么显示上传进度条

你可以使用 @progress 获取到上传进度，配合 progress 实现上传进度条。

实现思路：根据源码得知，进度条状态通过文件 uni_modules/uni-file-picker/components/uni-file-picker/uni-file-picker.vue 中的setProgress设置。修改思路也是基于此方法。

1. 自定义上传时，自定义一个回调方法，拿到progress,接下来会用到。

   /**  
   * @description 文件上传  
   * @param filePath 文件路径  
   * @param uuid 文件uuid  
   * @param progressCallBack 上传进度回调  
   */  
   export function uploadFile(filePath, uuid, progressCallBack) {  
   return new Promise(resolve => {  
       const uploadTask = uni.uploadFile({  
           header: {  
               'token': uni.getStorageSync('token'),  
               'enterpriseId': 'test'  
           },  
           url: `${baseUrl}/file-serv/file/upload`, // 上传图片的接口  
           filePath,  
           formData: {  
               name: 'file'  
           },  
           success: async (uploadFileRes) => {  
               // 获取图片list  
               const {  
                   data  
               } = uploadFileRes  
               const {  
                   code,  
                   data: d  
               } = JSON.parse(data)  
               if (code == 200) {  
                   resolve({  
                       url: d.url,  
                       uuid  
                   })  
               }  
           }  
       })  
       // 通过uploadTask 监听上传进度   
       uploadTask.onProgressUpdate(res => {  
           progressCallBack(res)  
       })  
   })  
   }

   上传文件时调用：

   async onSelect(e) { // 组件回调方法，在这里做文件上传动作  
   const _this = this  
   const uuid = e.tempFiles[0]['uuid']  
   const res = await uploadFile(e.tempFilePaths[0], uuid, function(progress) {  
       console.log('progress：', progress)  
       _this.$refs.uploadFile.setProgressByCustomUplaod(uuid, progress.progress) // 通过组件实例调用设置进度条的方法  
   })  
   },

2. 在组件中设置ref，目的是得到组件实例。通过实例即可调用组件方法setProgress。为了与源代码区分，定义新的方法setProgressByCustomUplaod

   <uni-file-picker ref="uploadFile" fileMediatype="image" @select="onSelect" @delete="onDelete" :limit="5" />

   调用：_this.$refs.uploadFile.setProgressByCustomUplaod(uuid, progress.progress)

3. 在uni_modules/uni-file-picker/components/uni-file-picker/uni-file-picker.vue文件中新增方法setProgressByCustomUplaod

   /**  
   * @description 自定义上传时，设置进度条状态  
   * @param uuid 文件uuid，目的是通过uuid从文件列表中取出当前正在上传的文件  
   * @param progress 上传进度  
   */  
   setProgressByCustomUplaod(uuid, progress) {  
   const currentFile = this.files.find(item => item.uuid == uuid)  
   if (currentFile) {  
       currentFile.progress = progress  
   }  
   }