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

uniapp小程序上传图片并压缩

html >> template部分:

<view class="mainBox"><uni-file-picker file-mediatype="image" mode="grid" limit="20" :value="uploadImgList":sourceType="['camera', 'album']" @select="uploadSelect" ref="filePicker"@delete="uploadDelete"></uni-file-picker>
</view>

script >> methods部分:

// 上传图片
uploadSelect(val) {val.tempFiles.forEach(async item => {try {// 压缩图片const compressedFilePath = await this.compressImage(item.url);// 将压缩后的图片转换为 Base64const base64Url = await this.becomeBase64img(compressedFilePath);this.uploadImgList.push({url: base64Url,uuid: item.uuid});this.imgBase64List.push(base64Url);} catch (error) {console.error('图片处理失败:', error);}})
},
// 压缩图片
compressImage(filePath) {return new Promise((resolve, reject) => {uni.compressImage({src: filePath,quality: 20, // 压缩质量,范围 0 - 100,数值越小,压缩率越高success: (res) => {resolve(res.tempFilePath);},fail: (err) => {reject(err);}});});
},
// 删除图片
uploadDelete(file) {for (let i = this.uploadImgList.length - 1; i >= 0; i--) {if (this.uploadImgList[i].uuid === file.tempFile.uuid) {this.uploadImgList.splice(i, 1);this.imgBase64List.splice(i, 1);}}
},
// 转义成base64图片
becomeBase64img(val) {return new Promise(function(resolve, reject) {pathToBase64(val).then(path => {resolve(path)}).catch(err => {reject(reject)})})
},		
http://www.dtcms.com/a/297195.html

相关文章:

  • 吊汤:厨房的鲜味密码
  • 若依框架 ---一套快速开发平台
  • STM32-中断配置教程(寄存器版)
  • 【应急响应】进程隐藏技术与检测方式(二)
  • Gin 框架的中间件机制
  • 三种深度学习模型(GRU、CNN-GRU、贝叶斯优化的CNN-GRU/BO-CNN-GRU)对北半球光伏数据进行时间序列预测
  • win11 使用adb 获取安卓系统日志
  • ESP32学习笔记_Peripherals(4)——MCPWM基础使用
  • C++ : list的模拟
  • Kafka——多线程开发消费者实例
  • 使用OpenCV做个图片校正工具
  • 技术演进中的开发沉思-45 DELPHI VCL系列:6种方法
  • 关于新学C++编程Visual Studio 2022开始,使用Cmake工具构建Opencv和SDK在VS里编译项目开发简介笔记
  • RocketMQ常见问题梳理
  • 三、Spark 运行环境部署:全面掌握四种核心模式
  • 【内网穿透】使用FRP实现内网与公网Linux/Ubuntu服务器穿透项目部署多项目穿透方案
  • vue使用xlsx库导出excel
  • 编程语言Java——核心技术篇(三)异常处理详解
  • 字符串 “asdasjkfkasgfgshaahsfaf” 经过哈夫曼编码之后存储比特数是多少?
  • [实战] 用1 PPS 驯服本地恒温晶振(OCXO/TCXO)
  • 医疗AI跨机构建模实施总结:基于 Flower 联邦学习与差分隐私的实践指南
  • ESP32学习笔记_Components(1)——使用LED Strip组件点亮LED灯带
  • 迷宫生成与寻路可视化
  • 广州 VR 安全用电技术:工作原理、特性及优势探析​
  • 天通卫星赋能三防智能平板:AORO P1100打造全域通信新范式
  • 【数据结构与算法】数据结构初阶:详解二叉树(六)——二叉树应用:二叉树选择题
  • 【数据库】探索DBeaver:一款强大的免费开源数据库管理工具
  • 医疗数据挖掘Python机器学习案例
  • PAT 甲级题目讲解:1008《Elevator》
  • Agent领域,近年来的前沿研究方向:多智能体协作、认知启发架构、伦理安全、边缘计算集成