uniapp使用uni.chooseImage选择图片后对其是否符合所需的图片大小和类型进行校验

uniapp使用uni.chooseImage选择图片后对其是否符合所需的图片大小和类型进行校验

码农世界 2024-05-22 前端 59 次浏览 0个评论

uni.chooseImage的返回值在H5平台和其他平台的返回值有所差异,具体差异看下图

根据图片可以看出要想判断上传的文件类型是不能直接使用type进行判断的,所以我使用截取字符串的形式来判断,当前上传图片的后缀名是否符合所需要求。

要求:

上传的图片大小要在4M以内,图片的格式为JPG、PNG、JPGE,除此之外的图片都不符合要求。

代码实现:


    *形象照:
    请上传真实形象照,图片大小在4M以内,图片格式仅支持JPG、PNG、JPEG
    
      
      
    
const handlePicker = (e : any) => {
    uni.chooseImage({
      count: 1,
      success: function ({ tempFiles, tempFilePaths }) {
        const size = tempFiles[0].size / 1024 / 1024; // 计算文件大小(单位:M)
        const extension = tempFilePaths[0].split('.').pop();
        const arr = ['jpg', 'png', 'jpeg']; // 允许的图片格式列表
        if (size > 4) {
          uni.showToast({ title: '图片大小不能超过4M', icon: 'none' });
        } else if (extension && !arr.includes(extension)) {
          uni.showToast({ title: '图片格式仅支持JPG、PNG、JPEG', icon: 'none' }
          );
        } else {
          formData.photo = tempFilePaths[0]
        }
      }
    });
  }

效果图:

转载请注明来自码农世界,本文标题:《uniapp使用uni.chooseImage选择图片后对其是否符合所需的图片大小和类型进行校验》

百度分享代码,如果开启HTTPS请参考李洋个人博客
每一天,每一秒,你所做的决定都会改变你的人生!

发表评论

快捷回复:

评论列表 (暂无评论,59人围观)参与讨论

还没有评论,来说两句吧...

Top