【UNIAPP】uniapp版图片压缩工具

二次封装的uniapp版本图片压缩、上传工具,支持全端(H5、小程序、APP)

  • 新建文件:file-util.js 
class FileUtil {/*** [文件上传]* @param  {[object]} fileObj    [图片地址]* @param  {[object]} formData   [参数]* @param  {[string]} url        [上传地址]* @param  {[boolean]} compress  [是否压缩]* @return {[Promise]}         [description]*/async uploadFile(fileObj, formData = {}, url, compress = true) {if (!fileObj) {return uni.showToast({title: '找不到文件~'});}setTimeout(() => {uni.showLoading({title: '上传中...',mask: true,})}, 500)let file = fileObj;if (compress) {file = await this.compressImage(fileObj)}return this.upload(file, formData, url)}/*** * @param {Object} fileObj [文件对象]* @param {Object} imageWidth 图片宽度*/async compressImage(fileObj, imageWidth = 500) {let file = fileObj;//#ifndef H5file = await this.compressByMp(fileObj)//#endif//#ifdef H5file = await this.compressByH5(fileObj, imageWidth)//#endifreturn file}/*** [压缩图片-小程序/APP]* @param  {[type]} fileObj [description]* @return {[type]}         [description]*/async compressByMp(fileObj) {return new Promise(resolve => {if (fileObj.size > 500000) {uni.compressImage({src: fileObj.path, // 图片路径quality: 60, // 压缩质量success(res) {let file = {name: fileObj.name,type: fileObj.type,size: fileObj.size,path: res.tempFilePath}resolve(file)},fail(error) {console.warn('图片压缩异常,使用原图', error)resolve(fileObj)}})} else {console.warn('500K以下不压缩')resolve(fileObj)}})}/*** H5压缩* @param {Object} fileObj 文件对象* @param {Object} imageWidth 图片宽度* @returns*/compressByH5(fileObj, imageWidth) {return new Promise(resolve => {try {uni.getImageInfo({src: fileObj.path,success: function(res) {let canvasWidth = res.width //图片原始长宽let canvasHeight = res.height;let base = canvasWidth / canvasHeight;if (canvasWidth > imageWidth) {canvasWidth = imageWidth;canvasHeight = Math.floor(canvasWidth / base);}let img = new Image();img.src = fileObj.path; // 要压缩的图片  let canvas = document.createElement('canvas');let ctx = canvas.getContext('2d');canvas.width = canvasWidth;canvas.height = canvasHeight;//  将图片画到canvas上面   使用Canvas压缩  ctx.drawImage(img, 0, 0, canvasWidth, canvasHeight);canvas.toBlob(function(fileSrc) {let imgSrc = window.URL.createObjectURL(fileSrc); //原生JS生成文件路径uni.downloadFile({url: imgSrc, //仅为示例,并非真实的资源success: (res) => {console.log('downloadFile', res)if (res.statusCode === 200) {let file = {name: fileObj.name,type: fileObj.type,size: fileObj.size,path: res.tempFilePath}resolve(file)} else {console.warn('图片压缩异常,使用原图', res)resolve(fileObj)}},fail(error) {console.warn('图片压缩异常,使用原图', error)resolve(fileObj)}})});}})} catch (e) {console.warn('图片压缩异常,使用原图', e)resolve(file)}})}/*** 图片转base64 - H5* @param {Object} file* @param {Object} imageWidth* @returns*/compresToBase64ForH5(file, imageWidth) {return new Promise((resolve, reject) => {try {uni.getImageInfo({src: file.path,success: function(res) {let canvasWidth = res.width //图片原始长宽let canvasHeight = res.height;let base = canvasWidth / canvasHeight;if (canvasWidth > imageWidth) {canvasWidth = imageWidth;canvasHeight = Math.floor(canvasWidth / base);}let img = new Image();img.src = file.path; // 要压缩的图片  let canvas = document.createElement('canvas');let ctx = canvas.getContext('2d');canvas.width = canvasWidth;canvas.height = canvasHeight;//  将图片画到canvas上面   使用Canvas压缩  ctx.drawImage(img, 0, 0, canvasWidth, canvasHeight);var ext = img.src.substring(img.src.lastIndexOf(".") + 1).toLowerCase();var dataURL = canvas.toDataURL("image/" + ext);resolve(dataURL)}})} catch (e) {reject(e)}})}/*** 上传到服务器 (响应报文按实际情况调整)* @param {Object} file* @param {Object} formData* @param {Object} url*/upload(file, formData, url) {console.log(file)if (!formData) formData = {}return new Promise((resolve, reject) => {uni.uploadFile({url,filePath: file.path,formData,name: 'file',header: {"chartset": "utf-8",'X-Access-Token': "token",// "content-type":'application/x-www-form-urlencoded'},success(res) {let dataJson = JSON.parse(res.data)if (res.statusCode == 200) {// resolve(decodeURIComponent(data))if (dataJson.success) {resolve(dataJson.result)} else {let tip = '上传失败'if (dataJson && dataJson.message) tip = dataJson.messageuni.showToast({title: tip})reject(dataJson)}} else {let tip = '上传失败'if (dataJson && dataJson.message) tip = dataJson.messageuni.showToast({title: tip})reject(dataJson)}},fail(error) {let message = error.errMsg;if (message.indexOf('uploadFile:fail timeout') > -1) message = '上传超时,请尝试压缩图片'else if (message.indexOf('uploadFile:fail') > -1) message = '服务器或网络异常,信息提交失败!'else message = '上传失败'uni.showToast({title: message})reject(error)},complete(res) {console.log(res)setTimeout(() => {uni.hideLoading();}, 500)}})})}
}export default new FileUtil()
  •  使用:
import FileUtil from '@/utils/file-util'FileUtil.upload(fileObj)

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

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

相关文章

Python去除图像白色背景

使用Pillow去除图像背景 安装依赖: pip install pillow 实现步骤: 使用Pillow库加载图像,并将其转换为RGBA模式,以支持透明度。遍历图像的每个像素,检查其红色、绿色和蓝色值是否都高于预设的阈值。对于被视为白色…

Spring Cache之本地缓存注解@Cacheable,@CachePut,@CacheEvict使用

*使用前需要在启动类上添加一个注解:EnableCaching 先说一下SpringCache是不支持灵活的缓存时间设置的,但可以自己实现。且不支持集群,因为是缓存到每台机器上,除非所有机器都有缓存。 所以使用场景一般是数据量较小的单机服务。…

Excel如何把两列数据合并成一列,4种方法

Excel如何把两列数据合并成一列,4种方法 参考链接:https://baijiahao.baidu.com/s?id=1786337572531105925&wfr=spider&for=pc 在Excel中,有时候需要把两列或者多列数据合并到一列中,下面介绍4种常见方法,并且提示一些使用注意事项,总有一种方法符合你的要求:…

uniApp项目运行到鸿蒙手机,应用图标一直是H,应用名一直是HBuilder问题

项目运行到鸿蒙手机,应用图标一直是H,应用名一直是HBuilder问题 应用运行到鸿蒙手机和鸿蒙模拟器,应用图标一直是H,应用名一直是HBuilder,在自动生成的harmony-configs文件夹下也没有配置的文件, 这时候需要你将DevEco Studio 下…

uniapp 自定义加载组件,全屏加载,局部加载 (微信小程序)

效果图 全屏加载 页面加载使用 局部加载 列表加载里面使用 使用gif html <template><view><view class"" v-if"typeFullScreen"><view class"loading" v-if"show"><view class""><i…

C++----特殊类的设计

文章目录 特殊类的设计设计一个类不能被拷贝设计一个类&#xff0c;只能在堆上创建对象设计一个类&#xff0c;只能在栈上创建对象设计一个类&#xff0c;不能被继承设计一个类&#xff0c;只能创建一个对象&#xff08;单例模式&#xff09;设计模式单例模式概念单例模式的实现…

鸿蒙实战:使用隐式Want启动Ability

文章目录 1. 实战概述2. 实现步骤2.1 创建鸿蒙应用项目2.2 修改Index.ets代码2.3 创建LuzhouAbility2.4 创建Luzhou页面2.5 设置模块配置文件 3. 测试效果4. 实战总结 1. 实战概述 本次鸿蒙应用实战&#xff0c;先创建项目“ImplicitWantStartAbility”&#xff0c;接着修改In…

两数之和 python

两数之和 题目描述示例1示例2示例3提示leetcode链接解题思路Python 实现详细解释 题目描述 给定一个整数数组 nums 和一个整数目标值 target&#xff0c;请你在该数组中找出 和为目标值 target 的那 两个 整数&#xff0c;并返回它们的数组下标。 你可以假设每种输入只会对应…

Android ConstraintLayout 基础

Android ConstraintLayout 基础 屏障线 Barrier设置水平和垂直方向的约束关系长宽比链式结构组站位辅助线 参考地址 屏障线 Barrier 以下是使用 ConstraintLayout 在 Android 中实现简单屏障线&#xff08;Barrier&#xff09;使用的示例代码&#xff0c;主要步骤如下&#xf…

NLP论文速读(多伦多大学)|利用人类偏好校准来调整机器翻译的元指标

论文速读|MetaMetrics-MT: Tuning Meta-Metrics for Machine Translation via Human Preference Calibration 论文信息&#xff1a; 简介&#xff1a; 本文的背景是机器翻译&#xff08;MT&#xff09;任务的评估。在机器翻译领域&#xff0c;由于不同场景和语言对的需求差异&a…

AJAX学习(24.11.1-24.11.14)(包含HTTP协议)

AJAX学习&#xff08;24.11.1-11.14) 来源&#xff1a; 传智 | 高校学习平台-首页 传智播课&#xff1a;黑马程序员 1.服务器和客户端 1.服务器&#xff1a;存放和对外提供资源的电脑。 2.客户端&#xff08;用户&#xff09;&#xff1a;获取和消费资源的电脑。&#xff0…

AI 驱动低代码平台:开创智能化用户体验新纪元

一、引言 人工智能技术如汹涌浪潮般迅猛发展&#xff0c;在各个行业掀起了颠覆性的变革风暴。于软件开发领域而言&#xff0c;AI 辅助编程与低代码平台的完美结合已然成为关键趋势&#xff0c;极大地提高了开发效率。然而&#xff0c;低代码平台的使命绝非仅仅局限于简化开发流…

【Python】深入理解Python中的懒加载:从零实现按需加载提升程序性能

《Python OpenCV从菜鸟到高手》带你进入图像处理与计算机视觉的大门! 懒加载(Lazy Loading)是一种在实际需要时才加载数据或资源的编程技术,广泛应用于提升程序的性能和启动速度。尤其在Python中,懒加载机制可以显著降低初始化时间和内存占用。本文详细介绍如何在Python中…

好用的js组件库

lodash https://www.lodashjs.com/https://www.lodashjs.com/ uuid 用于生成随机数&#xff0c;常用于生成id标识 GitHub - uuidjs/uuid: Generate RFC-compliant UUIDs in JavaScripthttps://github.com/uuidjs/uuid dayjs 常用于时间的处理 安装 | Day.js中文网 (fenxi…

基于麒麟服务器操作系统V10版本,部署Nginx服务、MySql服务搭建PHP环境,实现静态网站平台的搭建。

一、环境准备 关闭防火墙。 查看当前防火墙的状态 systemctl status firewalld Copy 如果防火墙的状态参数是inactive,则防火墙为关闭状态。 如果防火墙的状态参数是active,则防火墙为开启状态。 关闭防火墙。 如果您想临时关闭防火墙,需要运行以下命令: systemctl…

[JavaWeb] 尚硅谷JavaWeb课程笔记

1 Tomcat服务器 Tomcat目录结构 bin&#xff1a;该目录下存放的是二进制可执行文件&#xff0c;如果是安装版&#xff0c;那么这个目录下会有两个exe文件&#xff1a;tomcat10.exe、tomcat10w.exe&#xff0c;前者是在控制台下启动Tomcat&#xff0c;后者是弹出GUI窗口启动To…

Spring Security 中的 UserDetailsService

在本篇博客中&#xff0c;我们将探讨 UserDetailsService 的重要性&#xff0c;以及如何通过实际示例在 Spring Security 中实现它。 理解 UserDetailsService UserDetailsService 是 Spring Security 提供的一个接口&#xff0c;用于在认证过程中获取用户详细信息。DaoAuthe…

SRP 实现 Cook-Torrance BRDF

写的很乱&#xff01; BRDF&#xff08;Bidirectional Reflectance Distribution Function&#xff09;全称双向反射分布函数。辐射量单位非常多&#xff0c;这里为方便直观理解&#xff0c;会用非常不严谨的光照强度来解释说明。 BRDF光照模型&#xff0c;上反射率公式&#…

向量数据库FAISS之五:原理(LSH、PQ、HNSW、IVF)

1.Locality Sensitive Hashing (LSH) 使用 Shingling MinHashing 进行查找 左侧是字典&#xff0c;右侧是 LSH。目的是把足够相似的索引放在同一个桶内。 LSH 有很多的版本&#xff0c;很灵活&#xff0c;这里先介绍第一个版本&#xff0c;也是原始版本 Shingling one-hot …

基于YOLOv8深度学习的无人机航拍小目标检测系统(PyQt5界面+数据集+训练代码)

本研究提出并实现了一种基于YOLOv8深度学习模型的无人机航拍小目标检测系统&#xff0c;旨在解决高空环境下汽车目标检测的技术难题。随着无人机技术的发展&#xff0c;航拍图像已广泛应用于交通监控、城市管理、灾害应急等多个领域。然而&#xff0c;由于无人机通常在较高的飞…