uniapp一些UI库的上传组件都只提供图片上传，如果我想更丰富实现文件、视频就需要自己编写上传组件了。
但是呢，摆在眼前困难非常巨大。因为uniapp需要兼容小程序，上传限制没H5爽快。好在官方提供了一个丰富的上传组件uni-file-picker。
又是但是，uni-file-picker库默认上传只封装了他们的服务空间，组件自定义丰富度马上砍半了。这些问题肯定难不倒大家，于是乎大家在编写上传组件时，会发现：默认的上传列表有一个进度条，如何给他添加进度呢？ 如图所示：
官方提问有一个贴子有指导方法：ask.dcloud.net.cn/question/15… 。经过实测是可以实现的。只是在我看来，需要修改库文件源码都是不靠谱的做法，毕竟库文件升级更新，覆盖了自己修改的文件，就会引起各种错误了。
有没有一个不修改库文件，又可以修改进度条的办法呢？ 答案是有的。直接拿出代码来说吧：
<uni-file-picker :ref="test" :limit="9" file-mediatype="all" title="最多选择9个文件" @select="onSelectFile"></uni-file-picker>
先声明组件，然后定义select事件进行文件上传。
method:{
onSelectFile(event){
this.$refs['test'][0].files[0].progress = 50 //这里就是修改对应进度条
//files[0] 是你当前上传的下标，实际上你要自己处理当前上传属于哪个下标文件。不
//懂得话，你打印一下event 这个参数。
//下面编写上传逻辑
....
}}
那么onSelectFile大概思路就很完整了，下面给出一个伪代码：
onSelectFile(event){
//只想上传
const uploadTask = uni.uploadFile({
success: (res) => {
this.$refs['test'][0].files[0].progress = 100
},fail: (err) => {}})
uploadTask.onProgressUpdate((res) => {
this.$refs['test'][0].files[0].progress = res.progress //实时进度条更新
})
}
ok，至此整个进度条更新就完毕了。
最后补充一点，下标有时候你不知道是哪个文件，可以通过文件的uuid去识别。具体请console.log(event)
