uni-file-picker限制图片上传大小

背景:在使用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]
    })
  }
}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值