vue 通过 image-conversion 实现图片压缩
简介
vue项目中，上传图片时如果图片很大，通过 image-conversion 压缩到指定大小
1. 安装依赖
npm i image-conversion --save
2. 引用
import * as imageConversion from 'image-conversion'
3. 使用
const newFile = new Promise((resolve) => {// 压缩到500KB,这里的500就是要压缩的大小,可自定义imageConversion.compressAccurately(file, 500).then(res => {resolve(res)}).finally(() => {console.log('将图片文件压缩到了500kb')})
})
4. 实际场景应用
<!-- 上传按钮 -->
<el-uploadaction=""class="upload"multipleaccept=".png, .jpg, .jpeg":before-upload="beforeDocumentUpload":http-request="beforeAvatarUpload":on-preview="handlePictureCardPreview":before-remove="handlerBeforeRemove":file-list="pictureList":limit="10":on-exceed="handleExceed"list-type="picture-card"
><i class="el-icon-plus" />
</el-upload>
<!-- 预览大图 -->
<el-dialog :visible.sync="imgVisible" :append-to-body="true"><img width="100%" :src="dialogImageUrl" alt="">
</el-dialog>
methods:
methods: {// 上传前beforeDocumentUpload(file) {const size = file.size / 1024 / 1024// 上传的图片大小不能超过10Mif (size > 10) {this.$message.warning('文件大小不能超过10M！')return false}const extension = this.getFileType(file)// 只支持 png, jpg, jpeg 格式if (!['png', 'jpg', 'jpeg'].includes(extension)) {this.$message.warning('只能上传png、jpg、jpeg格式文件！')return false}// 大于0.5M压缩成0.5Mif (size > 0.5) {const loading = this.$loading({lock: true,text: '加载中'})// 压缩const newFile = new Promise((resolve) => {// 压缩到500KB,这里的500就是要压缩的大小,可自定义imageConversion.compressAccurately(file, 500).then(res => {resolve(res)}).finally(() => {loading.close()})})console.log('newFIle', newFile)return newFile}return true},// 上传beforeAvatarUpload(file) {const self = thisconst reader = new FileReader()reader.readAsDataURL(file.file)reader.onload = function(e) {// const img_base64 = e.target.result// 自定义数组对象，传给后台的数据self.imgBase64Array.push({uid: file.file.uid,base64Str: file// base64Str: img_base64})}},// 预览大图handlePictureCardPreview(file) {this.dialogImageUrl = file.urlthis.imgVisible = true},// 删除图片handlerBeforeRemove(file, fileList) {this.imgBase64Array = this.imgBase64Array.filter((p) => p.uid !== file.uid)},handleExceed() {this.$message.warning('图片数量最多为10张')},
},
相关文章：
vue 通过 image-conversion 实现图片压缩
简介 vue项目中，上传图片时如果图片很大，通过 image-conversion 压缩到指定大小 1. 安装依赖 npm i image-conversion --save2. 引用 import * as imageConversion from image-conversion3. 使用 const newFile new Promise((resolve) > {// 压…...
自由学习记录（27）
event委托在类内可完全修改 （前提为该event在类中的声明为public，外部可访问，然后外部访问的时候不能直接改） 下面这段代码是在 类的内部 访问事件 void ClearAllListeners() {MyEvent null; }event 修饰的委托字段 在类内部没…...
MATLAB数学建模之画图汇总
MATLAB是一种强大的数学软件，广泛应用于工程计算、控制设计、信号处理等领域。在数学建模中，MATLAB的绘图功能可以帮助我们直观地展示数据和模型结果。 1. 二维数据曲线图 1.1 绘制二维曲线的基本函数 plot函数用于绘制二维平面上的线性坐标曲线图&am…...
UML箭线图的理解和实践
在软件开发的世界里，UML（统一建模语言）作为一种标准化的建模语言，扮演着举足轻重的角色。UML类图更是软件开发设计和架构过程中的核心工具，它不仅能帮助开发者明确系统中的类及其关系，还能为后续的代码实现…...
最新AI问答创作运营系统（SparkAi系统），GPT-4.0/GPT-4o多模态模型+联网搜索提问+问答分析+AI绘画+管理后台系统
目录 一、人工智能 系统介绍文档 二、功能模块介绍 系统快速体验 三、系统功能模块 3.1 AI全模型支持/插件系统 AI大模型 多模态模型文档分析 多模态识图理解能力 联网搜索回复总结 3.2 AI智能体应用 3.2.1 AI智能体/GPTs商店 3.2.2 AI智能体/GPTs工作台 3.2.3 自…...
C#中的多态
多态（Polymorphism）是面向对象编程中的核心概念之一，它允许对象在不同的上下文中表现出不同的行为。简单来说，多态使得相同的方法调用可以表现出不同的行为，这使得代码更加灵活、可扩展和可维护。 在 C# 中࿰…...
【SQL】实战--组合两个表
题目描述 表: Person ---------------------- | 列名 | 类型 | ---------------------- | PersonId | int | | FirstName | varchar | | LastName | varchar | ---------------------- personId 是该表的主键（具有唯一值的列）…...
Unity 的介绍
Unity是一款功能强大的跨平台游戏开发引擎，以下是关于它的详细介绍： 一、概述 Unity由Unity Technologies公司开发，它提供了一个直观的开发环境，用于创建2D、3D游戏、模拟、虚拟现实（VR）、增强现实&#…...
深度学习的进展
深度学习新纪元 引言 你是否曾想过，为什么智能助手能理解你的指令，数字图像能够被准确分类，甚至疾病能被更早地诊断？这些现代奇迹背后都有一个共同的驱动力——深度学习。它不仅是当今人工智能领域的闪亮明星，更是一…...
vue中实现数字滚动效果
安装vue-count-to npm install vue-count-to引入 vue-count-to <template><div><count-to :start-val"startVal" :end-val"endVal" :duration"duration" :decimals"decimals" :separator"separator" :pref…...
Python的textwrap库：文本包装的艺术
目录 一、初识textwrap 二、textwrap的核心函数 1. fill 2. wrap 3. dedent 4. indent 5. shorten 三、高级用法与技巧 1. 处理特殊字符 2. 自定义断行逻辑 3. 自定义缩进和前缀 四、实战案例 五、总结 在Python编程中，处理文本是一项基础且常见的任务…...
linux 系列服务器 高并发下ulimit优化文档
系统输入 ulimit -a 结果如下 解除或提高 Linux 系统的最大进程数 在高并发场景中，合理设置 Linux 系统的最大进程数对于提升服务器性能至关重要。以下是具体步骤： 临时修改 ulimit 设置 可以通过 ulimit 命令临时调整当前会话的最大进程数。 查看当前…...
Spring03——基于xml的Spring应用
Spring开发中主要对Bean的配置 Bean的常用配置一览如下： Xml配置方式功能描述<bean id"" class"">Bean的id和全限定名配置<bean name"">通过name设置Bean的别名，通过别名也能直接获取到Bean实例<bean sc…...
IDEA 鼠标悬浮显示方法注释 javaDoc 及配置遇到的问题
方法详情： 鼠标悬浮时的效果： 设置方法： File -> Settings -> Editor -> Code Editing -> Quick Documentation,勾选红框中的选项 可能会遇到的问题： 如果不能选中，如下图 把下图的位置的选中项取消掉 选…...
openstack创建浮动IP全过程
1、创建外部网络，即是provider网络，有关provider网络的详细解释请参见我之前的文章openstack中的self-service和provider网络_openstack provider网络不能创建vlan吗-CSDN博客 network create --share --external --provider-physical-network physnet1…...
利用空闲主机进行Nmap隐匿扫描：IP伪造与空闲扫描技术
IP伪造与空闲扫描技术 在网络安全领域，扫描和识别目标主机的开放端口是攻击者获取目标信息的重要手段。传统的扫描方法可能会暴露扫描者的真实IP地址，从而引起目标主机的警觉。然而，IP地址伪造是一种巧妙的方式，可以帮助攻击者在…...
vue聊天对话语音消息播放动态特效
vue2写法，vue3也能用，粘之即走： 示例： <template><div class"voice-hidden"><divclass"voice-play-chat":class"[className, { animate-stop: !isPlaying }]"><div class&q…...
流媒体之linux下离线部署FFmpeg 和 SRS
前言 用户对网络做了限制，只能访问指定的网址，和没网没啥区别，导致无法连接外网，无法获取安装包，还有一些编译需要的开源工具 用户需要用平台查看库房的海康摄像头实时监控，只能在库房里一台纯净的ubantu…...
C/C++内存管理
1. C/C内存分布 我们先来看下面的一段代码和相关问题 const int a（此时an存放在栈上）char char2[] "abcd"（此时是在栈上创建5个char类型大小的数组，并让用常量字符串来初始化数组内的内容，*char2就是数组…...
xiaolin coding 图解 MySQL笔记——锁篇
1. 全局锁是怎么用的？ flush tables with read lock 执行以后，整个数据库就处于只读状态了，这时其他线程执行对数据的增删改操作（insert、delete、update）；对表结构的更改操作（alter table、dr…...
node.js实现分页和jwt鉴权机制
const express require(express); const jwt require(jsonwebtoken); const app express(); // 模拟数据库 const db { users: [ { id: 1, username: user1, email: user1example.com }, // ...更多用户 ], // ...其他数据模型 }; // 应用中间件 app.use(express.json…...
Issue id: AppLinkUrlError 应用intent-filter 配置深链接 URL 问题分析 | AndroidManifest
AndroidManifest.xml 配置文件中，对 activity 组件进行声明的时候，独立应用在 IDE 显示 intent-filter 报错，但不影响实际编译，因为是系统应用，肯定会有此 URL 的存在。 AOSP 源码： <activity android:…...
STM32F103 PWM配置
在《STM32F103定时器配置》中我们介绍了PWM的产生原理，本节介绍介绍如何编码实现PWM的输出。 一、PWM相关寄存器 TIMx如果要产生PWM，除了我们上一节提到的如下寄存器： 控制寄存器(TIMx_CR1)；DMA/中断使能寄存器(TIMx_DIER)&#x…...
C语言蓝桥杯进阶
系列文章目录 文章目录 系列文章目录前言一、题目1、在 ISO 国际标准中定义了 A0 纸张的大小为 1189mm 841mm，将 A0 纸沿长边对折后为 A1 纸，大小为 841mm 594mm，在对折的过程中长度直接取下整（实际裁剪时可能有损耗）…...
【笔记2-2】ESP32：开发板与espidf插件的一些配置项
主要参考b站宸芯IOT老师的视频，记录自己的笔记，老师讲的主要是linux环境，但配置过程实在太多问题，就直接用windows环境了，老师也有讲一些windows的操作，只要代码会写，操作都还好，开发…...
【Linux】线程概念 | 线程控制
文章目录 👉知识补充👈👉Linux线程概念👈什么是线程Makefile线程 VS 进程线程的优点线程的缺点线程异常线程用途 👉线程控制👈线程终止pthread_exit 函数pthread_cancel 函数线程 ID 的深入理解在多线程的场…...
OCR的评价指标和常用数据集
1.OCR任务简介 OCR(Optical Character Recognition,光学字符识别)是指对包含文本内容的图像或者视频进行处理识别，并提取其中所包含的文字及排版信息的过程。例如，一个常见的应用是将包含文档图像的不可编辑状态的 PDF 文档通过 OCR 技术识别后…...
React性能优化
三个可以优化的地方 避免过度多次渲染 组件会在以下情况下重新渲染 注意：例如组件组合的形式，<Test><Counter></Counter></Test>,即使Test发生了重新渲染，Counter也不会重新渲染。另外使用React这样的库或框架时&a…...
Django之ORM
1.ORM介绍 ORM概念 对象关系映射（Object Relational Mapping，简称ORM）模式是一种为了解决面向对象与关系数据库存在的互不匹配的现象的技术。 简单的说，ORM是通过使用描述对象和数据库之间映射的元数据，将程序中的对…...
macos上设置windsurf命令行启动
解决方案 1. 在/usr/local/bin 目录下创建软链 sudo ln -s /Applications/Windsurf.app/Contents/Resources/app/bin/windsurf /usr/local/bin/windsurf 2. 执行source source ~/.zshrc...
一、web基础和http协议
前言 https://www.baidu.com/：URL（是一种万维网寻址网址） https://：协议，加密的http，加密的超文本传输协议，在数据传输之前要通过整数进行身份验证，验证通过才可以进行数据传输。 …...
Can‘t find variable: token（token is not defined）
文章目录 例子 1：使用 var例子 2：使用 let 或 const例子 3：异步操作你的代码中的情况 Cant find variable: tokentoken is not defined源代码 // index.jsPage({data: {products:[],cardLayout: grid, // 默认卡片布局为网格模式isGrid: tr…...
Elasticsearch ILM 故障排除：常见问题及修复
作者：来自 Elastic Stef Nestor 大家好！我们的 Elasticsearch 团队正在不断改进我们的索引生命周期管理 (index Lifecycle Management - ILM) 功能。当我第一次加入 Elastic Support 时，我通过我们的使用 ILM 实现自动滚动教程快速上手。在帮…...
1. 设计模式的由来
设计模式的灵感来自建筑师亚历山大的“设计套路”，后来被程序员借用，总结出一套“编程武功秘籍”。 20世纪90年代，四位软件工程师（被称为“四人帮”）——Erich Gamma、Richard Helm、Ralph Johnson 和 John Vlissides&…...
【Excel】Excel中将日期格式转换为文本格式，并按日期显示。
【问题需求】 在使用excel进行数据导入的过程中， 有的软件要求日期列必须是文本格式。 但是直接将日期列的格式改为文本后，显示一串数字，而不按日期显示。 进而无法导入使用。 【解决方法】 使用【TXET】函数公式进行处理， 在单独…...
SpringBoot入门：如何新建SpringBoot项目（保姆级教程）
在本文中，我们将演示如何新建一个基本的 Spring Boot 项目。写这篇文章的时候我还是很惊讶的，因为我发现有些java的初学者，甚至工作10年的老员工居然并不会新建一个SpringBoot项目，所以特别出了一篇文章来教大家新建一个SpringBoo…...
什么是Layer Normalization？
一、概念 前面的文章中，我们介绍了Batch Normalization。BN的目的是使得每个batch的输入数据在每个维度上的均值为0、方差为1（batch内，数据维度A的所有数值均值为0、方差为1，维度B、C等以此类推），这是由于神…...
基于神经网络的弹弹堂类游戏弹道快速预测
目录 一、 目的... 1 1.1 输入与输出.... 1 1.2 隐网络架构设计.... 1 1.3 激活函数与损失函数.... 1 二、 训练... 2 2.1 数据加载与预处理.... 2 2.2 训练过程.... 2 2.3 训练参数与设置.... 2 三、 测试与分析... 2 3.1 性能对比.... 2 3.2 训练过程差异.... 3 四、…...
ASP.NET CORE API 解决跨域问题
环境 vs2022 .net 8 创建ASP.net Core API项目 配置跨域 编写ApiController 启动项目 得到服务器运行的 地址 在Hbuiler中创建web项目，编写代码 【运行】-【运行到浏览器】-选择一个浏览器,查看结果 正常显示 问题 如果允许所有源访问，有安全风险方…...
西安理工大学丨ChatGPT助力学术论文写作训练营-助力发表SCI一区、二区
在当今学术研究中，科研人员在撰写论文时面临诸多挑战。首先是信息量的剧增，科研人员需要快速消化新知识，筛选相关信息并清晰表达。但论文写作不仅是信息的罗列，还需要条理清晰、逻辑严密、语言精准，特别是在竞争激烈的…...
Android hid 数据传输（device 端 ）
最近一直在处理hid 数据需求，简而言之就是两台设备直接可以通过usb 线互相传递数据。 项目架构 为什么Device 端要采用HID（人机接口设备）的方式发送和接收数据呢？ 主要是速度快，举个例子，就是鼠标移动&am…...
Facebook 人工智能：重塑社交新未来
在数字化迅速发展的今天，人工智能(AI)已经深入了我们的生活，尤其是在社交媒体领域。Facebook作为全球最大的社交平台之一，正利用AI技术，革新其服务和用户体验，为用户打造社交互动的新未来。 首先，人工智能…...
UIlicious - 自动化端到端测试
在现代软件开发中，测试自动化已然成为产品交付质量的基石。而端到端测试（E2E），作为验证整个应用流畅运行的关键，常常是测试工作中最具挑战性的一环。这时，一款简单高效的自动化测试工具——UIlicious&#…...
PHP 与 MySQL 搭配的优势
一、PHP 与 MySQL 搭配的优势 强大的动态网页开发能力 PHP 是一种服务器端脚本语言，能够生成动态网页内容。它可以根据用户的请求、数据库中的数据等因素，实时地生成 HTML 页面返回给客户端浏览器。而 MySQL 是一个流行的关系型数据库管理系统…...
HDFS 操作命令
在现代的企业环境中，单机容量往往无法存储大量数据，需要跨机器存储。统一管理分布在 集群上的文件系统称为 分布式文件系统 。 HDFS （ Hadoop Distributed File System ）是 Apache Hadoop 项目的一个子项目， Hadoo…...
第四篇：k8s 理解Service工作原理
什么是service？ Service是将运行在一组 Pods 上的应用程序公开为网络服务的抽象方法。 简单来说K8s提供了service对象来访问pod。我们在《k8s网络模型与集群通信》中也说过k8s集群中的每一个Pod（最小调度单位）都有自己的IP地址，都…...
什么是TCP的三次握手？
TCP的三次握手：深入理解建立可靠连接的过程 引言 在计算机网络中，传输控制协议（TCP）是确保数据可靠传输的核心协议之一。TCP通过三次握手机制来建立一个稳定的、双向的连接，这对于确保数据的完整性和顺序至关重要。本…...
Pytorch使用手册- TorchVision目标检测微调Tutorial的使用指南（专题十二）
这篇教程的目标是对一个预训练的 Mask R-CNN 模型进行微调，应用于 Penn-Fudan 行人检测与分割数据集。该数据集包含 170 张图像，里面有 345 个行人实例，我们将通过这个教程来演示如何使用 torchvision 中的新特性，训练一个面向自定义数据集的目标检测和实例分割模型。 注意…...
Modern Effective C++条款三十五：优先考虑基于任务的编程而非基于线程的编程
C中开发者可以通过两种主要方式异步执行一个函数，如doAsyncWork()。这两种方法分别是基于线程(thread-based)和基于任务(task-based)的方式。 基于线程的方式 使用std::thread创建一个新的线程来执行doAsyncWork()函数，直接且直观，但也有其…...
lyapunov指数的绘制
有如下方程： %% 方程式 % x(n1)1y(n)-a*x(n)^2 % y(n1)b*x(n)绘制其对应的lyapunov指数。 MATLAB实现方式： clc; clearvars; close all;%% 方程式 % x(n1)1y(n)-a*x(n)^2 % y(n1)b*x(n)%% 代码 N 1000; a (0:0.001:1.4); b 0.3; na length(a…...