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

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

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

要求:

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

代码实现:

<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>
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]
        }
      }
    });
  }

效果图:

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/645206.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

牛客网刷题 | BC97 回文对称数

目前主要分为三个专栏&#xff0c;后续还会添加&#xff1a; 专栏如下&#xff1a; C语言刷题解析 C语言系列文章 我的成长经历 感谢阅读&#xff01; 初来乍到&#xff0c;如有错误请指出&#xff0c;感谢&#xff01; 描述 今天牛牛学到了回文…

电子电器架构 - AUTOSAR软件架构介绍

电子电器架构 - AUTOSAR软件架构介绍 我是穿拖鞋的汉子,魔都中坚持长期主义的汽车电子工程师。 老规矩,分享一段喜欢的文字,避免自己成为高知识低文化的工程师: 屏蔽力是信息过载时代一个人的特殊竞争力,任何消耗你的人和事,多看一眼都是你的不对。非必要不费力证明自己…

Nginx代理配置(专业版)

写在前面提醒&#xff1a;使用代理&#xff0c;如果可以&#xff0c;请尽量支持双协议&#xff0c;http、https均要支持哈。 注意&#xff1a;监控系统只是运行代码&#xff0c;是否支持https&#xff0c;需要运维同学在你们的服务器上配置https证书&#xff0c;配置好证书&…

关于构建生成式AI产品的思考

在过去的六个月里&#xff0c;我们 LinkedIn 的团队一直在努力开发一种新的人工智能体验。我们希望重新构想我们的会员如何进行求职和浏览专业内容。 生成式人工智能的爆炸式增长让我们停下来思考一年前不可能实现的事情。我们尝试了许多想法&#xff0c;但都没有真正实现&…

OpenAI模型GPT-4o、GPT-4、Gemini 1.5性能比较

大家好&#xff0c;OpenAI最新推出的GPT-4o&#xff0c;标志着人工智能语言模型和交互方式迈入了新纪元。最引人注目的是&#xff0c;GPT-4o支持实时互动和流畅的对话切换&#xff0c;让交流更加自然。 本文将对比分析GPT-4o、GPT 4以及谷歌的Gemini和Unicorn模型&#xff0c;…

LabelMe下载及关键点检测数据标注

本文关键点数据集链接,提取码:x1pk 1.LabelMe下载 这部分内容和YOLOv8_seg的标注软件是一样的,使用anaconda创建虚拟环境安装LabelMe,指令如下: conda create -n labelme python=3.6 -y conda activate labelme conda install pyqt conda install pillow pip install la…

第六节:带你全面理解vue3 浅层响应式API: shallowRef, shallowReactive, shallowReadonly

前言 前面两章,给大家讲解了vue3中ref, reactive,readonly创建响应式数据的API, 以及常用的计算属性computed, 侦听器watch,watchEffect的使用 其中reactive, ref, readonly创建的响应式数据都是深层响应. 而本章主要给大家讲解以上三个API 对应的创建浅层响应式数据的 API,…

使用Java和XxlCrawler获取各城市月度天气情况实践

目录 前言 一、历史数据获取 1、关于天气后报 2、信息界面分析 二、数据的提取开发 1、PageVo的定义 2、属性定义 3、实际信息抓取 三、信息抓取调试以及可能的问题 1、信息获取成果 2、关于超时的问题 四、总结 前言 这篇文章主要来源于一个我们家小朋友的一个作业…

数据库管理-第194期 网络加速RDMA初探(20240526)

数据库管理194期 2024-05-26 数据库管理-第194期 网络加速RDMA初探&#xff08;20240526&#xff09;1 概念2 发展3 使用总结 数据库管理-第194期 网络加速RDMA初探&#xff08;20240526&#xff09; 作者&#xff1a;胖头鱼的鱼缸&#xff08;尹海文&#xff09; Oracle ACE A…

GCANet去雾算法

目录 1. 引言 2. 门控上下文注意机制&#xff08;GCA&#xff09; 3. 去雾流程 4. 模型代码 5. GCANet的优势 6. 去雾效果 1. 引言 GCANet(Gate-Controlled Attention Network)是一种用于图像去雾的深度学习算法&#xff0c;通过引入注意力机制来改进传统的去雾方法&…

使OpenCV可以读取中文路径图片的方法

一&#xff0e;问题复现 1.代码 #! /usr/bin/env python # -*- coding: utf-8 -*-# File: show_img.pyimport cv2# 读取图片 img cv2.imread("车牌素材/冀A.png")# 显示图片 cv2.imshow("img", img) cv2.waitKey(0)2.报错截图 3.报错内容 [ WARN:00.05…

简单好用的文本识别方法--付费的好用,免费的更有性价比

文章目录 先说付费的进入真题&#xff0c;免费的来喏&#xff01;PixPin微信 先说付费的 直达网址!!! 进入真题&#xff0c;免费的来喏&#xff01; PixPin 商店里就有 使用示例&#xff1a; 可以看到&#xff1a;贴在桌面上的图片可以复制图片中的文字&#xff0c;真的很…

第一篇【传奇开心果系列】Python的跨平台开发工具beeware技术点案例示例:使用beeware实现跨平台开发,从hello world开始

传奇开心果博文系列 系列博文目录Python的跨平台开发工具beeware技术点案例示例系列 博文目录前言一、BeeWare套件主要功能介绍二、Toga相对于其他Python UI库具有的优势介绍三、使用toga开发安卓手机应用hello world步骤和示例代码四、使用toga写一个iOS 苹果手机应用hello wo…

红蓝对抗-HW红蓝队基本知识(网络安全学习路线笔记)

第一, 什么是蓝队 蓝队&#xff0c;一般是指网络实战攻防演习中的攻击一方。 蓝队一般会采用针对目标单位的从业人员&#xff0c;以及目标系统所在网络内的软件、硬件设备同时执行多角度、全方位、对抗性的混合式模拟攻击手段&#xff1b;通过技术手段实现系统提权、控制业务、…

高速数据采集与传输(一):ADC08D500调研

前言&#xff1a;高速ADC数据采集的应用和开发&#xff0c;涉及的技术面非常的广泛&#xff0c;后续阶段博主将尝试以纯项目开发的形式做一次专题技术分享&#xff0c;将基于高速数据采集的相关内容进行一系列的技术文档更新。博主全凭兴趣在更新和总结&#xff0c;很难做到一直…

unity开发Hololens 制作滑动框

一定要做到最后一步&#xff0c;才会有效果 1、创建空物体 ,并添加组件 创建空物体 命名ScrollingObjectCollection&#xff0c; 添加组件如下图 下面是各个组件展开的内容 2、在ScrollingObjectCollection 下面创建两个空物体&#xff0c;分别命名Container、Clipping…

[AI Google] 介绍 VideoFX,以及 ImageFX 和 MusicFX 的新功能

VideoFX 是来自 labs.google 的最新实验&#xff0c;您可以查看音乐效果和图像效果的新更新&#xff0c;现在在 110 多个国家可用。 生成式媒体正在改变人们构思创意并增强我们的创造力能力的方式。我们致力于与创作者和艺术家合作构建人工智能&#xff0c;以更好地理解这些生成…

C++第三方库 【HTTP/HTTPS】— httplib库

目录 认识httplib库 安装httplib库 httplib的使用 httplib请求类 httplib响应类 Server类 Client类 httplib库搭建简单服务器&客户端 认识httplib库 httplib库&#xff0c;是一个C11单头文件的&#xff0c;轻量级的跨平台HTTP/HTTPS库&#xff0c;可以用来创建简单的…

软件设计师干货资料分享

从2月份备考&#xff0c;到5月份结束&#xff0c;满打满算四个月准备时间。在此我想提醒一句&#xff0c;世界上没有什么不劳而获的事情&#xff0c;never&#xff0c;只要你是一个普通人&#xff0c;但凡你想索取一些什么&#xff0c;无一例外你都需要付出&#xff0c;而且是踏…

【每日力扣】84. 柱状图中最大的矩形 与 295. 数据流的中位数

&#x1f525; 个人主页: 黑洞晓威 &#x1f600;你不必等到非常厉害&#xff0c;才敢开始&#xff0c;你需要开始&#xff0c;才会变的非常厉害 84. 柱状图中最大的矩形 给定 n 个非负整数&#xff0c;用来表示柱状图中各个柱子的高度。每个柱子彼此相邻&#xff0c;且宽度为…