uni-file-picker 自定义上传,显示上传进度条
原文地址:https://ask.dcloud.net.cn/question/153368。3、在组件中设置ref,目的是得到组件实例。通过实例即可调用组件方法。1、自定义上传时,自定义一个回调方法,拿到。为了与源代码区分,定义新的方法。
·
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
<uni-file-picker fileMediatype="video" mode="grid" @select="selectVideo"
ref="uploadVideo" @delete="deleteVideo" :limit="1" />
调用:_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
开放原子开发者工作坊旨在鼓励更多人参与开源活动,与志同道合的开发者们相互交流开发经验、分享开发心得、获取前沿技术趋势。工作坊有多种形式的开发者活动,如meetup、训练营等,主打技术交流,干货满满,真诚地邀请各位开发者共同参与!
更多推荐
已为社区贡献2条内容
所有评论(0)