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

相关文章:

  • 【MacOS】发展历程
  • 基于 Nginx 与未来之窗防火墙构建下一代自建动态网络防护体系​—仙盟创梦IDE
  • 好看的小程序推广单页HTML源码 可用作导航页
  • 校园二手交易小程序的设计与实现
  • 如何将荣耀手机的照片传输到 Mac
  • 小程序安卓ApK转aab文件详情教程MacM4环境
  • Linux 时间同步的流程
  • 小程序卡顿到丝滑体验:ZKmall开源商城性能优化与兼容修复实战指南
  • 教培机构如何开发自己的证件照拍照采集小程序
  • 【pybind11】 pybind11如何调用python
  • 《整合Spring Cache:本地缓存、Redis与Caffeine对比实践》
  • Python 数据可视化之 Matplotlib 库
  • 【国内电子数据取证厂商龙信科技】谁是躲在“向日葵”后的
  • OSPF之多区域
  • 【ResNet50图像分类部署至RK3588】模型训练→转换RKNN→开发板部署
  • Jmeter的元件使用介绍:(四)前置处理器详解
  • JMeter每次压测前清除全部以确保异常率准确(以黑马点评为例、详细图解)
  • Pytorch中register_buffer和torch.nn.Parameter的异同
  • npm init vite-app runoob-vue3-test2 ,npm init vue@latest,指令区别
  • LIMA:大语言模型对齐的“少即是多”革命——原理、实验与范式重构
  • VR 技术在污水处理领域的创新性应用探索​
  • 华为云DRS实现Oracle到GaussDB数据库迁移的全流程技术方案
  • GTSuite许可与网络安全
  • Android Studio 自带的官方模拟器,ABI这一列是x86_64,xABI这一列是arm64-v8a
  • Apache Ranger 权限管理
  • Android Studio 2024 内嵌 Unity 3D 开发示例
  • Android studio自带的Android模拟器都是x86架构的吗,需要把arm架构的app翻译成x86指令?
  • Oracle数据块8KB、OS默认认块管理4KB,是否需调整大小为一致?
  • 弹性网:基于神经网络的多组分磁共振弹性成像波反演与不确定性量化|文献速递-医学影像算法文献分享
  • LeetCode 127:单词接龙