实现思路：根据源码得知，进度条状态通过文件 uni_modules/uni-file-picker/components/uni-file-picker/uni-file-picker.vue 中的setProgress设置。修改思路也是基于此方法。
- 自定义上传时，自定义一个回调方法，拿到
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) // 通过组件实例调用设置进度条的方法
})
},
- 在组件中设置ref，目的是得到组件实例。通过实例即可调用组件方法
setProgress。为了与源代码区分，定义新的方法setProgressByCustomUplaod
<uni-file-picker ref="uploadFile" fileMediatype="image" @select="onSelect" @delete="onDelete" :limit="5" />
- 在
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
}
}
