当前位置: 首页 > 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.xdnf.cn/news/1182871.html

相关文章:

  • 图片查重从设计到实现(3)图片存储MinIO 应用介绍及 Docker 环境下的安装部署
  • Java学习第七十五部分——Docker
  • 【前端】JavaScript文件压缩指南
  • Gitee Test:国产软件测试平台如何筑牢关键领域数字安全屏障
  • Spring Boot License 认证系统
  • c# openxml 打开加密 的word读取内容
  • SQL性能优化
  • 基于开源链动2+1模式AI智能名片S2B2C商城小程序的私域流量池用户运营研究
  • 如何实现缓存音频功能(App端详解)
  • vscode 字体的跟换
  • OpenCV 图像变换全解析:从镜像翻转到仿射变换的实践指南
  • VSCode——python选择解释器消失的解决办法
  • 【通识】算法案例
  • 安卓上的迷之K_1171477665
  • 顺应AI浪潮,电科金仓数据库再创辉煌
  • 2025真实面试试题分析-安卓客户端开发
  • 去除视频字幕 2, 使用 PaddleOCR 选取图片中的字幕区域, 根据像素大小 + 形状轮廓
  • AI浪潮涌,数据库“融合智能”奏响产业新乐章
  • I/O多路复用机制中触发机制详细解析
  • 【数据结构】长幼有序:树、二叉树、堆与TOP-K问题的层次解析(含源码)
  • 【SpringAI实战】实现仿DeepSeek页面对话机器人(支持多模态上传)
  • 【深度学习优化算法】09:Adadelta算法
  • JavaScript -Socket5代理使用
  • 攻防世界-Crypto-Morse
  • react+threejs实现自适应分屏查看/3D场景对比功能/双场景对比查看器
  • C 语言 | 结构体详解:自定义数据类型的艺术
  • 筑牢网站运营根基:售后工作的核心维度与实践方法
  • 篇五 网络通信硬件之PHY,MAC, RJ45
  • 车身域控制器MCU市场报告:解析行业现状与未来趋势
  • 【机器学习之推荐算法】基于矩阵分解和损失函数梯度下降的协同过滤算法实现