uni-file-picker 自定义上传，显示上传进度条

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

/**  
* @description 文件上传  
* @param data 文件路径  
* @param uuid 文件uuid  
* @param progressCallBack 上传进度回调  
*/ 
function uploadFile(data, uuid, progressCallBack) {
	var promise = new Promise((resolve, reject) => {
		var tempFilePaths = data;
		const uploadTask = uni.uploadFile({
			url: commoneUrl + "file/upload", //仅为示例，非真实的接口地址
			filePath: tempFilePaths,
			name: 'upFile',
			formData: {

			},
			success: async (res) => {

				console.log(res)
				// 获取图片list  
				const {
					data,
					statusCode
				} = res

				if (statusCode == 200) {
					resolve({
						url: data,
						uuid
					})
				}
			},
			fail: (res) => {
				reject(res);
			}
		});
		// 通过uploadTask 监听上传进度   
		uploadTask.onProgressUpdate(res => {
			progressCallBack(res)
		})
	});
	return promise;
}

2、上传文件时调用

//上传视频
        async selectVideo(e) {
            const _this = this
            const tempFilePaths = e.tempFilePaths[0];
            const uuid = e.tempFiles[0]['uuid']
            const res = await _this.api.upload(tempFilePaths, uuid, function(progress) {
                _this.$refs.uploadVideo.setProgressByCustomUplaod(uuid, progress
                    .progress) // 通过组件实例调用设置进度条的方法  
            })
            _this.formData.videoUrl = res.url
            _this.messageToggle('success', '视频上传成功！')

        },

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

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

4、在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
    }
},

原文地址：https://ask.dcloud.net.cn/question/153368