uni-app选择多张图片上传并压缩——2024.04.02

news/2024/7/27 9:02:01/文章来源:https://blog.csdn.net/weixin_44977914/article/details/137275264
uni.chooseImage之后plus.zip.compressImage压缩

1、uni.uploadFile(OBJECT)只能循环调用上传(递归)
2、项目对图片压缩后的清晰度要求较高,不使用画布canvas压缩,chooseImage时选择原图。

// 上传图片
chooseImage(){uni.chooseImage({sizeType: ['original'], //可以指定是原图还是压缩图,默认二者都有sourceType: ['album', 'camera'], //拍照// count: 1, //1张图success: (res) => {this.currentFiles = res.tempFilePaths;// 在上传某张图片之前压缩uni.showLoading({title: '照片压缩上传中',mask: true});// 第一张 之后递归this.translateapp(this.currentFiles[0], 0, imgUrl => {this.currentFiles[0] = imgUrl;this.uploadFile(0, imgUrl);})// 保存到相册// 如果是拍照则保存图片到相册// 相册选择的图片是以file://开头的绝对路径// 拍照返回的是以_doc/开头的相对路径var tempFilePaths = res.tempFilePaths[0];if (res.tempFilePaths.length == 1 && !tempFilePaths.startsWith('file://')) {uni.saveImageToPhotosAlbum({filePath: tempFilePaths,success: function() {console.log('save success');},fail(e) {uni.showToast({position: "bottom",icon: 'none',title: '保存图像到相册失败'})}});}},fail: (err) => {// #ifdef APP-PLUS// 安卓操作系统if(osName != 'ios'){if(err.code == 11){//用户点击取消return;}uni.showModal({title: '错误内容',content: '请确认相机权限已开启!',showCancel: false});}// #endif}})
},
// app端压缩图片
translateapp(img, i, callback) {plus.io.resolveLocalFileSystemURL(img, (entry) => { //通过URL参数获取目录对象或文件对象entry.file((file) => { // 可通过entry对象操作图片 console.log('压缩前图片信息:' + JSON.stringify(file)); //压缩前图片信息if (file.size > this.imgMaxLength) { //   如果大于imgMaxLength进行压缩this.scale = 50;plus.zip.compressImage({ // 5+ plus.zip.compressImage 了解一下,有详细的示例src: img, //src: 压缩原始图片的路径    dst: img.replace('.jpg', 'yasuo.jpg').replace('.JPG', 'yasuo.JPG'),width: '100%', //dst: (String 类型 )压缩转换目标图片的路径,这里先在后面原始名后面加一个yasuo区分一下height: '100%', //width,height: (String 类型 )缩放图片的宽度,高度quality: this.scale, //quality: (Number 类型 )压缩图片的质量overwrite: true, //overwrite: (Boolean 类型 )覆盖生成新文件// format: 'jpg'   //format: (String 类型 )压缩转换后的图片格式}, (event) => {console.log('压缩后图片信息:' + JSON.stringify(event));callback(event.target);}, function(err) {console.log('Resolve file URL failed: ' + err.message);uni.showToast({title: err.message,icon: "none"})});} else { //else小于imgMaxLength跳过压缩,直接返回现有的srcconsole.log('no resolve');// uni.hideLoading();callback(img);}});}, (e) => { // 返回错误信息console.log('Resolve file URL failed: ' + e.message);uni.showToast({title: e.message,icon: "none"})});
},
// 上传图片 递归函数 异步
uploadFile(i, file){var length = this.currentFiles.length;var that = this;var url = that.$commonData.uploadUrl[that.ProjectCode];uni.uploadFile({url: url,//上传的服务器地址filePath: file, //要上传文件资源的路径 String类型name: 'file',header:{"Authorization": 'Bearer ' + that.ACCESSTOKEN},success: function (res) { //当调用uploadFile成功之后,再次调用后台修改的操作if (res.statusCode == 200) {var responseData = JSON.parse(res.data);var item = {};if (responseData.result) {var Imghash = responseData.result[0].value;var type = that.uploadConfig.code;if (Imghash) {var fileItem = {attachmentId: Imghash,type: type,};that.attachmentList.push(fileItem);}i++;  //递归函数console.log('....第' + i + '张上传成功....');if (i < length){// 第一张 之后递归that.translateapp(that.currentFiles[i], i, imgUrl => {that.uploadFile(i, imgUrl);})}if (i == length){uni.hideLoading();uni.showToast({title: "图片上传成功",icon: "success"});// 上传attachmentList函数that.uploadImage();}}}else{uni.hideLoading();uni.showToast({title: res.data.error.message,icon: 'none',});}},fail: (err) => {uni.hideLoading();uni.showToast({title: '图片上传失败',duration: 2000,icon: "none" ,});}});
},

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

如若内容造成侵权/违法违规/事实不符,请联系dt猫网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

紫光展锐P7885核心板详细参数介绍_5G安卓智能模块开发方案

紫光展锐P7885核心板采用了先进的6nm EUV制程工艺&#xff0c;集成了高性能的应用处理器和金融级安全解决方案&#xff0c;为用户带来了全新的性能体验。 P7885核心板搭载了先进的6nm制程工艺SoC P7885&#xff0c;其中包含四核A76和四核A55&#xff0c;主频可达2.7Ghz&#xf…

计算机网络面试问题(一)

1.在浏览器中输⼊URL并按下回⻋之后会发⽣什么 2.TCP三次握⼿的过程,为什么三次握手 TCP&#xff08;传输控制协议&#xff09;的三次握⼿是建⽴⽹络连接的过程&#xff0c;确保通信双⽅能够正确地进⾏数据传输。 第⼀次握⼿&#xff08;SYN&#xff09;&#xff1a; 客户端&am…

【THM】SQL Injection(SQL注入)-初级渗透测试

简介 SQL(结构化查询语言)注入,通常称为 SQLi,是对 Web 应用程序数据库服务器的攻击,导致执行恶意查询。当 Web 应用程序使用未经正确验证的用户输入与数据库进行通信时,攻击者有可能窃取、删除或更改私人数据和客户数据,并攻击 Web 应用程序身份验证方法以获取私有数据…

风险与收益

风险与收益 影响资产需求的主要因素财富总量预期收益率资产的流动性影响流动性的主要因素 风险 如何降低风险系统风险和非系统风险机会集合与有效集合资产组合理论 影响资产需求的主要因素 影响资产需求的主要因素包括&#xff1a;财富总量、预期收益率、资产的流动性和风险。…

【JavaEE初阶系列】——多线程案例四——线程池

目录 &#x1f6a9;什么是线程池 &#x1f388;从池子中取效率大于新创建线程效率(why) &#x1f6a9;标准库中的线程池 &#x1f388;为什么调用方法而不是直接创建对象 &#x1f388;工厂类里的方法 &#x1f4dd;newCachedThreadPool() &#x1f4dd;newFixedThread…

使用Leaflet.rotatedMaker进行航班飞行航向模拟的实践

目录 前言 一、Leaflet的不足 1、方向插件 2、方向控制脚本说明 二、实时航向可视化实现 1、创建主体框架 2、飞机展示 3、位置和方位模拟 三、成果及分析 1、成果展示 2、方向绑定解读 总结 前言 众所周知&#xff0c;物体在空间中的运动&#xff08;比如飞行、跑步…

【Linux】ubuntu/centos8安装zsh终端

本文首发于 ❄️慕雪的寒舍 根据这篇知乎文章进行 https://zhuanlan.zhihu.com/p/514636147 1.安装zsh 先安装zsh并设置为默认的终端 # ubuntu sudo apt install zsh # centos sudo yum install zsh util-linux-user # 通用 chsh -s /bin/zsh如果centos下找不到chsh命令&am…

深入解析实时数仓Doris:Rollup上卷表与查询

码到三十五 &#xff1a; 个人主页 心中有诗画&#xff0c;指尖舞代码&#xff0c;目光览世界&#xff0c;步履越千山&#xff0c;人间尽值得 ! 目录 一、基本概念二、Aggregate 和 Unique 模型中的 ROLLUP三、Duplicate 模型中的 ROLLUP四、ROLLUP 调整前缀索引五、ROLLUP使…

改Jenkins版本号

旧服务器迁移到新&#xff0c;打包版本号更新 Jenkins.instance.getItemByFullName("双机热备").updateNextBuildNumber(65)

154 Linux C++ 通讯架构实战9 ,信号功能添加,信号使用sa_sigaction 回调,子进程添加,文件IO详谈,守护进程添加

初始化信号 使用neg_init_signals(); 在nginx.cxx中的位置如下 //(3)一些必须事先准备好的资源&#xff0c;先初始化ngx_log_init(); //日志初始化(创建/打开日志文件)&#xff0c;这个需要配置项&#xff0c;所以必须放配置文件载入的后边&#xff1b;//(4)一些初…

【SpringBoot整合系列】SpirngBoot整合EasyExcel

目录 背景需求发展 EasyExcel官网介绍优势常用注解 SpringBoot整合EaxyExcel1.引入依赖2.实体类定义实体类代码示例注解解释 3.自定义转换器转换器代码示例涉及的枚举类型 4.Excel工具类5.简单导出接口SQL 6.简单导入接口SQL 7.复杂的导出&#xff08;合并行、合并列&#xff0…

C++刷题篇——04找等值元素

一、题目 二、解题思路 1、分割后放进二维数组 2、使用map&#xff0c;key为数值&#xff0c;value为其坐标 3、遍历二维数组元素&#xff0c;再在map中找该元素对应的value值&#xff08;二维数组形式&#xff09;&#xff0c;倘若value.size为1&#xff0c;那直接返回-1&…

每天五分钟计算机视觉:使用神经网络完成人脸的特征点检测

本文重点 我们上一节课程中学习了如何利用神经网络对图片中的对象进行定位,也就是通过输出四个参数值bx、by、bℎ和bw给出图片中对象的边界框。 本节课程我们学习特征点的检测,神经网络可以通过输出图片中对象的特征点的(x,y)坐标来实现对目标特征的识别,我们看几个例子。…

uniapp-打包IOS的APP流程

打包前所需配置 在manifest文件内配置 1. APP图标 2. 启动界面 有三种启动界面配置 第一种是 HBuilderX 官方给的通用启动界面&#xff0c;页面单一&#xff0c;屏幕中间就一个圆框图标 第二种是自定义的启动图&#xff0c;无法通过AppStore的审核 第三种是自定义storyboard启动…

蚁剑流量分析

蚁剑流量分析 在靶机上面上传一个一句话木马&#xff0c;并使用蚁剑连接&#xff0c;进行抓包, 一句话木马内容 <?php eval($_POST[1]); defalut编码器 在使用蚁剑连接的时候使用default编码器 连接之后进行的操作行为是查看当前目录(/var/www/html)下的文件&#xff0…

MySQL-主从复制与读写分离

一、MySQL主从复制&#xff1a; 1、主从复制的作用&#xff1a; 主从复制&#xff1a;主设备通过二进制日志传输到从设备&#xff0c;从设备通过二进制日志和主同步数据。 作用&#xff1a;负载均衡读操作&#xff0c;备份(实时备份&#xff0c;不能替换手动的备份)&#xf…

(QT5142、OpenCV452、SeetaFace2 )facetest

服务端 .pro QT core gui network sql#window平台opencv&#xff0c;seetaface环境 win32{ LIBS C:\opencv452\x64\mingw\lib\libopencv* LIBS C:\SeetaFace\lib\libSeeta* INCLUDEPATH C:\opencv452\include INCLUDEPATH C:\opencv452\include\opencv2 INCLUDEPATH …

技术分享 | 如何写好测试用例?

对于软件测试工程师来说&#xff0c;设计测试用例和提交缺陷报告是最基本的职业技能。是非常重要的部分。一个好的测试用例能够指示测试人员如何对软件进行测试。在这篇文章中&#xff0c;我们将介绍测试用例设计常用的几种方法&#xff0c;以及如何编写高效的测试用例。 ## 一…

Nginx配置导致请求成环的问题

前期介绍 在一台主机上部署LAMP&#xff0c;之后使用Nginx实现反向代理&#xff0c;并且实现动静分离。 apache的访问端口为80&#xff0c;Nginx&#xff0c;访问端口为8001端口。 首先可以实现反向代理。 [rootlnmp-247 ~]# cat /usr/local/nginx/conf/nginx.conf worker_…

FPGA之组合逻辑与时序逻辑

数字逻辑电路根据逻辑功能的不同&#xff0c;可以分成两大类&#xff1a;组合逻辑电路和时序逻辑电路&#xff0c;这两种电路结构是FPGA编程常用到的&#xff0c;掌握这两种电路结构是学习FPGA的基本要求。 1.组合逻辑电路 组合逻辑电路概念&#xff1a;任意时刻的输出仅仅取决…