当前位置: 首页 > news >正文

H5项目实现图片压缩上传——2025-06-04

1. 图片压缩处理

前提:安装compressorjs

使用 compressorjs 库进行图片压缩,主要配置如下:

handleCompress(file) {new Compressor(file.file, {quality: 0.6,maxWidth: 1920,maxHeight: 1920,convertSize: 1024 * 1024,success: compressedFile => {const newFile = new File([compressedFile], file.file.name, {type: compressedFile.type,lastModified: Date.now()});this.onRead(newFile);},error: err => {console.error(err);this.$toast('图片压缩失败');}});
}

压缩配置说明:

  • quality: 0.6 - 压缩质量为60%
  • maxWidth: 1920 - 最大宽度限制
  • maxHeight: 1920 - 最大高度限制
  • convertSize: 1MB - 转换阈值

2. 文件大小限制

代码会检查文件大小,超过限制会提示错误:

<van-uploader:after-read="handleCompress"accept="image/*"multiple:max-size="10 * 1024 * 1024"@oversize="onOversize"
>
onOversize() {this.$toast('文件大小不能超过10MB');
}

3. 文件上传处理

压缩后的文件通过 FormData 进行上传:

onRead(file) {var formData = new FormData();if (file instanceof Array) {// 判断是否是数组file.map(element => {formData.append('file', element.file);});} else {formData.append('files', file);}formData.append('subject_id', this.id);formData.append('file_note', '');formData.append('name', file.name);uploadSourceFile(formData).then(res => {if (res.code === 0) {this.$toast({message: res.msg,position: 'middle'});this.activeTab = 'bytime';this.activeTimeNames = 0;this.getStatistics();} else {this.$toast({message: res.msg,position: 'middle'});}})

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

相关文章:

  • RAID相关例题
  • Go语言学习-->go的跨平台编译
  • Educational Codeforces Round 179 (Rated for Div. 2)
  • JVM 内存溢出 详解
  • 协议融合驱动效能跃升:Modbus转Ethernet IP的挤出吹塑机应用
  • PostgreSQL-基于PgSQL17和11版本导出所有的超表建表语句
  • LeetCode[513]找树左下角的值
  • Java 大视界 — Java 大数据在智能安防视频监控中的异常事件快速响应与处理机制
  • SQL 中 IN 和 EXISTS 的区别
  • Flask框架详解:轻量高效的Python Web开发利器
  • json 支持复杂结构预览、大模型服务部署体验优化|ModelWhale 版本更新
  • C++ 中的 const 知识点详解,c++和c语言区别
  • 沉金电路板有哪些特点?
  • 操作系统导论 第40章 文件系统实现
  • 【Python实战】零基础实战教程(三) 变量与数据类型
  • GQA(Grouped Query Attention):分组注意力机制的原理与实践《二》
  • 武汉火影数字|互动多媒体展项打造:开启沉浸式互动体验
  • 【Cursor】开发chrome插件,实现网页tab根据域名分组插件
  • 2025年- H67-Lc175--295.数据流中的中位数(小根堆,大根堆)--Java版
  • Mermaid 绘图--以企业权限视图为例
  • fastadmin+workman环境搭建
  • 光量子计算芯片改变了黄仁勋成见?英伟达拟与PsiQuantum联手颠覆未来算力
  • python第42天打卡
  • linux扫描所有私有网段shell脚本
  • UART协议调试遇到的一个问题
  • 《高等数学》(同济大学·第7版)第一章第五节《极限运算法则》
  • AReaL-boba²:开源异步强化学习训练系统的革命性突破
  • mysq进化
  • 数据结构与算法:动态规划中根据数据量猜解法
  • 如何应对敏捷转型中的团队阻力