l***@163.com
l***@163.com
  • 发布:2022-09-15 17:41
  • 更新:2023-05-17 17:54
  • 阅读:3034

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

分类:uni-app

:auto-upload="false" 自定义的上传方法,怎么在上传完成后,让选择的文件满格显示上传进度条

2022-09-15 17:41 负责人:无 分享
已邀请:
CODE_XU

CODE_XU

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

l***@qq.com

l***@qq.com

实现思路:根据源码得知,进度条状态通过文件 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  
    }  
    }
  • 2***@qq.com

    感谢分享, 已经按照这个思路实现了

    2023-05-20 14:34

  • l***@163.com

    回复 2***@qq.com: 请问在uni_modules/uni-file-picker/components/uni-file-picker/uni-file-picker.vue文件中新增方法,为什么不起作用呢?

    2023-06-12 17:18

要回复问题请先登录注册