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

效果图:

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

驱动与系统学习网址

DRM&#xff08;Direct Rendering Manager&#xff09;学习简介-CSDN博客 Android Qcom Display学习(零)-CSDN博客 https://blog.csdn.net/hexiaolong2009/category_9705063.htmlhttps://blog.csdn.net/hexiaolong2009/category_9705063.htmlRender Hell —— 史上最通俗易懂…

区间合并-leetcode合并石头的最低成本-XMUOJ元素共鸣:深层次的唤醒

题目 思路 话不多说&#xff0c;直接上代码 附上INT_MAX和INT_MIN 【C】详解 INT_MAX 和 INT_MIN&#xff08;INT_MAX 和 INT_MIN是什么&#xff1f;它们的用途是什么&#xff1f;如何防止溢出&#xff1f;&#xff09;_c int max-CSDN博客 代码 /* leetcode合并石头的最低…

clone方法总结Java

Java中Object类当中有许多方法&#xff0c;如图所示&#xff1a; clone方法就是其中一种&#xff0c;分为浅拷贝&#xff0c;深拷贝举一个例子&#xff1a; 浅拷贝&#xff1a; 在Person类当中右键鼠标然后&#xff0c;选中Generate&#xff1a; 然后重写clone方法 protecte…

电赛之路:历年试题剖析、实战经验分享与代码资源宝典

电赛之路&#xff1a;历年试题剖析、实战经验分享与代码资源宝典 一、电赛历年试题剖析2018年试题回顾&#xff1a;智能小车2019年试题精选&#xff1a;智能家居系统 二、实战经验分享1. 团队协作的艺术2. 时间管理与迭代开发3. 代码与文档规范 三、代码程序资源推荐1. GitHub电…

PTA 6-4 配对问题

许多大学生报名参与大运会志愿者工作。其中运动场引导员需要男女生组队&#xff0c;每组一名男生加一名女生&#xff0c;男生和女生各自排成一队&#xff0c;依次从男队和女队队头各出一人配成小组&#xff0c;若两队初始人数不同&#xff0c;则较长那一队未配对者调到其他志愿…

Vue3学习-Pinia 集中式状态管理工具

安装 Pinia npm i piniaPinia 集中式状态管理工具官网 传送门 引入 Pinia //引入 import { createPinia } from pinia const pinia createPinia() const app createApp(App); app.use(pinia);使用 // store 注册 import { defineStore } from "pinia"; export …

python弹出文件打开和保存的选择框

tkinter.filedialog 模块中的 askopenfilename 函数和 asksaveasfilename 函数来显示文件打开和保存的选择框。 这两个函数的作用都是返回一个文件名。如果选择了一个文件&#xff0c;则会返回文件的绝对路径&#xff0c;如果取消了选择&#xff0c;则返回空字符串 前者用来读时…

赶紧收藏!2024 年最常见 20道 Redis面试题(八)

上一篇地址&#xff1a;赶紧收藏&#xff01;2024 年最常见 20道 Redis面试题&#xff08;七&#xff09;-CSDN博客 十五、一个Redis实例最多能存放多少的keys&#xff1f; Redis实例能存放的键&#xff08;keys&#xff09;的数量主要受限于以下几个因素&#xff1a; 物理内…

android studio的gradle设置和镜像

新建的应用和其他的应用gradle版本各不一致&#xff0c;想着使用本地已经存在的版本&#xff0c;不知道为啥一直要去下载 现在先找一下镜像源&#xff1a; 官网地址&#xff1a;https://services.gradle.org/distributions/ 腾讯镜像 Gradle下载地址&#xff1a;https://mirro…

【MySQL精通之路】SQL优化(1)-查询优化(5)-引擎条件下推

1 介绍 这种优化提高了无索引列和常量之间直接比较的效率。 在这种情况下&#xff0c;条件会“向下推”到存储引擎进行评估。此优化只能由NDB存储引擎使用。 对于NDB集群&#xff0c;这种优化可以消除在集群的数据节点和发布查询的MySQL服务器之间通过网络发送不匹配行的操作…

【微服务】springboot 构建镜像多种模式使用详解

目录 一、前言 二、微服务常用的镜像构建方案 3.1 使用Dockerfile 3.2 使用docker plugin插件 3.3 使用docker compose 编排文件 三、环境准备 3.1 服务器 3.2 安装JDK环境 3.2.1 创建目录 3.2.2 下载安装包 3.2.3 配置环境变量 2.2.4 查看java版本 3.3 安装maven …

pyqt 浮动窗口QDockwidget

pyqt 浮动窗口QDockwidget QDockwidget效果代码 QDockwidget QDockWidget 是 PyQt中的一个控件&#xff0c;它提供了一个可以停靠在主窗口边缘或者浮动在屏幕上的窗口小部件&#xff08;widget&#xff09;。QDockWidget 允许用户自定义其界面&#xff0c;并提供了灵活的停靠和…

Keras实现SegNet

我真服了原来我之前用tf复现SegNet给复现错了 在网上试了多个版本代码&#xff0c;折腾了好久&#xff0c;现在终于复现对了&#xff0c;代码也跑通了 SegNet的架构比较老了&#xff0c;这几年都没人更新代码了&#xff0c;我这里算是提供一个最近能跑通的版本的代码吧 tf版本…

Elasticsearch集群许可证过期问题解决方法汇总

最近在使用elasticsearch的过程中,使用elastic-head进行可视化展示集群的状态和信息,从2024年5月18日突然elastic-head无法现在集群的状态界面啦,elasticsearch集群状态是正常,命令如下: curl -X GET "localhost:9200/_cluster/health?pretty" 在google页面上通过…

引流500+创业粉,抖音口播工具

在抖音平台运营一个专注于口播的工具号&#xff0c;旨在集结超过500位热衷于创业的粉丝&#xff0c;这需要精心筹划的内容策略和周到的运营计划。首先&#xff0c;明确你的口播工具号所专注的领域&#xff0c;无论是分享创业经验、财务管理技巧还是案例分析&#xff0c;确保你所…

Axmol 2.1.3 发布

我们非常荣幸&#xff0c;axmol 能在发布此版本之前被 awsome-cpp 收录&#xff01; The 2.1.3 release is a minor LTS release for bugfixes and improvements, thanks to iAndyHD3 add axmol to awsome-cpp The axmol home page was change to https://axmol.dev Signifi…

引入Dao

1.crm和数据库的结合 我们先前实现的crm项目的数据都是自定义的 而非数据库获取 因此现在我们应该实现crm和数据库的集成 ListServlet.java doPost方法中在处理异常的选项中 并没有发现throws方式 而只有try-catch方式 这是因为子类throws的异常必须和父类throws异常一致或者是…

【电子元件】TL431 电压基准

TL431(C23892)是一种常用的可调节精密电压基准和电压调节器。它广泛应用于电源管理、精密参考电压和稳压电路等领域。以下是TL431的一些关键特点和使用方法&#xff1a; 关键特点 可调输出电压&#xff1a;TL431的输出电压可以通过外部电阻网络在2.495V到36V范围内调整。精度高…

淘宝x5sec

声明 本文章中所有内容仅供学习交流使用&#xff0c;不用于其他任何目的&#xff0c;抓包内容、敏感网址、数据接口等均已做脱敏处理&#xff0c;严禁用于商业用途和非法用途&#xff0c;否则由此产生的一切后果均与作者无关&#xff01;wx a15018601872 本文章未…

vuedraggable插件 修改元素首次拖拽进入占位样式

vuedraggable是一款适用于vue3 的可拖拽插件。 通过配置ghost-class“ghost” 属性&#xff0c;可以对组件内元素拖拽过程中的占位符进行修改。但是无法根据ghost这一class对元素首次拖拽进组件内的占位元素进行样式修改 解决方法&#xff1a;元素首次拖拽进vuedraggable 中时…