背景:在使用uniapp官方上传组件uni-file-picker的时候,发现其不能设置单张图片上传大小限制。刚开始的处理方案是在组件回调方法也就是使用端那里处理的,发现这玩意坑的地方是会默认将选择的图片回填进去,在外面怎么处理也删不了。官方文档上也没有相关说明,如何通过配置变量实现,然后就搜索找解决方案,直接修改源代码进行实现。
文件目录如上,找到 chooseFileCallback 方法,修改里面的内容,针对单张图片上传大小做判断, 不满足条件的情况下不用回填,也不用把选择的文件抛给使用端。代码如下可进行参考:
let currentData = []
for (let i = 0; i < files.length; i++) {
if (this.limitLength - this.files.length <= 0) break
let fileSize = files[i].size / (1024 * 1024)
if (fileSize > 5) {
res.tempFiles.splice(i)
filePaths.splice(i)
files.splice(i)
uni.showModal({
showCancel: false,
title: '上传图片不能超过5MB',
})
}else{
files[i].uuid = Date.now()
let filedata = await get_file_data(files[i], this.fileMediatype)
filedata.progress = 0
filedata.status = 'ready'
this.files.push(filedata)
currentData.push({
...filedata,
file: files[i]
})
}
}