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

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

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

要求:

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

代码实现:

html 复制代码
<view class="photo">
    <view class="item-left"><text class="required">*</text>形象照:</view>
    <view class="tips">请上传真实形象照,图片大小在4M以内,图片格式仅支持JPG、PNG、JPEG</view>
    <view class="picker" @click="handlePicker">
      <image :src="formData.photo" mode="aspectFill" v-if="formData.photo" />
      <uni-icons v-else type="plusempty" size="70rpx" color="rgba(16, 16, 16, 0.34)"></uni-icons>
    </view>
</view>
javascript 复制代码
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]
        }
      }
    });
  }

效果图:

相关推荐
2501_916008892 小时前
iOS 不上架怎么安装?多种应用分发方式解析,ipa 文件安装、企业签名、Ad Hoc 与 TestFlight 实战经验
android·macos·ios·小程序·uni-app·cocoa·iphone
卷Java3 小时前
uni-app 模板语法修复说明
java·数据库·spring boot·uni-app·mybatis
iOS阿玮5 小时前
国庆假期 iOS 开发者守好邮箱 “防线”,严防恶意投诉避免产品下架
uni-app·app·apple
00后程序员张5 小时前
iOS App 混淆实战,在源码不可用情况下的成品加固与测试流程
android·ios·小程序·https·uni-app·iphone·webview
isixe7 小时前
Uniapp IOS 和 Android 下的文件写入用户目录
前端·uni-app
2501_916013749 小时前
iOS 26 设备文件管理实战指南,文件访问、沙盒导出、系统变更与 uni-app 项目适配
android·ios·小程序·uni-app·cocoa·iphone·webview
2501_915921439 小时前
前端用什么开发工具?常用前端开发工具推荐与不同阶段的选择指南
android·前端·ios·小程序·uni-app·iphone·webview
2501_916007479 小时前
iOS 26 能耗检测实战指南,升级后电池掉速是否正常 + KeyMob + Instruments 实时监控 + 优化策略
android·macos·ios·小程序·uni-app·cocoa·iphone
2501_916013749 小时前
苹果上架 App 全流程详解,iOS 应用发布步骤、ipa 文件上传工具、TestFlight 测试与 App Store 审核经验
android·ios·小程序·https·uni-app·iphone·webview
2501_9159090610 小时前
HTML 开发工具有哪些?常用 HTML 开发工具推荐、学习路线与实战经验分享
android·小程序·https·uni-app·iphone·webview