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

news2024/11/19 15:30:10

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.coloradmin.cn/o/1699423.html

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

相关文章

(已开源-ICRA2023) High Resolution Point Clouds from mmWave Radar

本文提出了一种用于生成高分辨率毫米波雷达点云的方法&#xff1a;RadarHD&#xff0c;端到端的神经网络&#xff0c;用于从低分辨率雷达构建类似激光雷达的点云。本文通过在大量原始雷达数据上训练 RadarHD 模型&#xff0c;同时这些雷达数据有对应配对的激光雷达点云数据。本…

Vue3实战笔记(37)—粒子特效登录页面

文章目录 前言一、粒子特效登录页总结 前言 上头了&#xff0c;再来一个粒子特效登录页面。 一、粒子特效登录页 登录页&#xff1a; <template><div><vue-particles id"tsparticles" particles-loaded"particlesLoaded" :options"…

ML307R OpenCPU GPIO使用

一、GPIO使用流程图 二、函数介绍 三、GPIO 点亮LED 四、代码下载地址 一、GPIO使用流程图 这个图是官网找到的&#xff0c;ML307R GPIO引脚电平默认为1.8V&#xff0c;需注意和外部电路的电平匹配&#xff0c;具体可参考《ML307R_硬件设计手册_OpenCPU版本适用.pdf》中的描…

MLM之CogVLM2:CogVLM2(基于Llama-3-8B-Instruct 模型进行微调)的简介、安装和使用方法、案例应用之详细攻略

MLM之CogVLM2&#xff1a;CogVLM2(基于Llama-3-8B-Instruct 模型进行微调)的简介、安装和使用方法、案例应用之详细攻略 目录 CogVLM2的简介 1、更新日志 2、CogVLM2 系列开源模型的详细信息 3、Benchmark 4、项目结构 5、模型协议 CogVLM2的安装和使用方法 1、模型微调…

智慧社区管理系统:打造便捷、安全、和谐的新型社区生态

项目背景 在信息化、智能化浪潮席卷全球的今天&#xff0c;人们对于生活品质的需求日益提升&#xff0c;期待居住环境能与科技深度融合&#xff0c;实现高效、舒适、安全的生活体验。在此背景下&#xff0c;智慧社区管理系统应运而生&#xff0c;旨在借助现代信息技术手段&…

685. 冗余连接 II

685. 冗余连接 II 问题描述 在本问题中&#xff0c;有根树指满足以下条件的 有向 图。该树只有一个根节点&#xff0c;所有其他节点都是该根节点的后继。该树除了根节点之外的每一个节点都有且只有一个父节点&#xff0c;而根节点没有父节点。 输入一个有向图&#xff0c;该…

String类为什么设计成不可变的?

目录 缓存 安全性 线程安全 hashCode缓存 性能 其实这个问题我们可以通过缓存、安全性、线程安全和性能几个维度去解析。 缓存 字符串是Java最常用的数据结构&#xff0c;我们都知道字符串大量创建是非常耗费资源的&#xff0c;所以Java中就将String设计为带有缓存的功能…

揭秘Python安装目录:你的编程宝库隐藏了哪些宝藏?

python3.10安装目录结构 Python310/ │ ├── DLLs/ # Python 解释器所需的 DLL 文件 ├── Doc/ # Python 的 官方文档和参考手册 ├── include/ # 头文件和静态库文件 ├── Lib/ # Python 标准库 ├── libs/ …

微信小程序实现计算当前位置到目的地的距离

实现方式&#xff1a;使用腾讯位置服务 微信小程序JavaScript SDK | 腾讯位置服务 1.进腾讯位置服务申请key 2.下载sdk 微信小程序JavaScript SDK | 腾讯位置服务 3.微信公众平台添加授权域名 4.代码实现计算 const qqmap require("../../utils/qqmap-wx-jssdk.min.js…

探索集合python(Set)的神秘面纱:它与字典有何不同?

新书上架~&#x1f447;全国包邮奥~ python实用小工具开发教程http://pythontoolsteach.com/3 欢迎关注我&#x1f446;&#xff0c;收藏下次不迷路┗|&#xff40;O′|┛ 嗷~~ 目录 一、集合&#xff08;Set&#xff09;与字典&#xff08;Dictionary&#xff09;的初识 1. …

历年高校招生计划数据 API 数据接口

历年高校招生计划数据 API 数据接口 基础数据 / 高校招生&#xff0c;各高校历年招生计划数据&#xff0c;高校招生数据 / 历年计划。 1. 产品功能 支持历年高校招生计划数据查询&#xff1b;包含各高校招生计划详细数据&#xff1b;多维度查询条件支持&#xff1b;毫秒级查询…

3款录屏录制软件,打造专业级视频内容

随着技术的不断发展&#xff0c;人们在日常工作和学习中经常会遇到记录电脑屏幕的需求&#xff0c;例如录制游戏过程、制作教程、保存会议记录等。为了解决这一需求&#xff0c;许多录屏录制软件应运而生。本文将介绍三款常见的录屏录制软件&#xff0c;通过分析它们的特点和使…

JAVASE之类和对象(2)

哪怕犯错&#xff0c;也不能什么都不做。 主页&#xff1a;趋早–Step 专栏&#xff1a;JAVASE gitte:https://gitee.com/good-thg 接上部分&#xff0c;我们继续来学习JAVAEE类和对象。 引言&#xff1a; 这篇文章接上一篇&#xff0c;后半部分&#xff0c;结束类和对象 目录 …

C++:STL简介和容器string用法篇

一、STL简介 STL是C中的标准模板库&#xff08;Standard Template Library&#xff09;的缩写。它是C标准库的一部分&#xff0c;提供了一系列的数据结构和算法模板&#xff0c;包括各种容器、算法、迭代器、仿函数等&#xff0c;用于简化和加速C程序的开发过程。STL的设计理念…

[6] CUDA之线程同步

CUDA之线程同步 共享内存&#xff1a;线程时间需要互相交换数据才能完成任务的情况并不少见&#xff0c;因此&#xff0c;必须存在某种能让线程彼此交流的机制当很多线程并行工作并且访问相同的数据或者存储器位置的时候&#xff0c;线程间必须正确的同步线程之间交换数据并不…

Django-auth组件

Django-auth组件 1 表结构 我们从python manage.py migrate为我们创建的auth组件内置的表开始看 auth_user&#xff1a;用户表存储用户信息&#xff08;登录admin后台&#xff09; 里面的字段分两类&#xff1a;用户基本信息&#xff08;用户名&#xff0c;邮箱&#xff0c;密…

音视频开发4-补充 FFmpeg 开发环境搭建 -- 在windows 上重新build ffmpeg

本节的目的是在windows 上 编译 ffmpeg 源码&#xff0c;这样做的目的是&#xff1a;在工作中可以根据工作的实际内容裁剪 ffmpeg&#xff0c;或者改动 ffmpeg 的源码。 第一步 &#xff1a;下载&#xff0c; 安装&#xff0c;配置 &#xff0c;运行 msys64 下载 下载地址&…

字符串的周期:每一期都有那么几位

【题目描述】 如果一个字符串可以由某个长度为k的字符串重复多次得到,则称该串以k为周期。例 如,abcabcabcabc以3为周期(注意,它也以6和12为周期)。 输入一个长度不超过80的字符串(不含空格),输出其最小周期。 输入第一行表示有T组数据,后续是T行字符串。输出的每组…

透视App投放效果,Xinstall助力精准分析,让每一分投入都物超所值!

在移动互联网时代&#xff0c;App的推广与投放成为了每一个开发者和广告主必须面对的问题。然而&#xff0c;如何精准地掌握投放效果&#xff0c;让每一分投入都物超所值&#xff0c;却是一个令人头疼的难题。今天&#xff0c;我们就来谈谈如何通过Xinstall这个专业的App全渠道…

python纯脚本搬砖DNF之深度学习,工作室适用

声明&#xff1a; 本文章仅作学习交流使用,对产生的任何影响&#xff0c;本人概不负责. 转载请注明出处:https://editor.csdn.net/md?articleId103674748 主要功能 脚本已初步完成&#xff0c;可以上机实战了 1.搬砖研究所、海伯伦&#xff08;持续更新中&#xff09; 2.自…