实现思路:根据源码得知,进度条状态通过文件 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" />
调用:
_this.$refs.uploadFile.setProgressByCustomUplaod(uuid, progress.progress)
- 在
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 } }
0 个评论
要回复文章请先登录或注册