【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,一经查实,立即删除!

相关文章

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…

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

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

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…

好用的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…

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;由于无人机通常在较高的飞…

LeetCode 热题 100 回顾

目录 一、哈希部分 1.两数之和 &#xff08;简单&#xff09; 2.字母异位词分组 &#xff08;中等&#xff09; 3.最长连续序列 &#xff08;中等&#xff09; 二、双指针部分 4.移动零 &#xff08;简单&#xff09; 5.盛最多水的容器 &#xff08;中等&#xff09; 6…

使用 PyTorch 实现 ZFNet 进行 MNIST 图像分类

在本篇博客中&#xff0c;我们将通过两个主要部分来演示如何使用 PyTorch 实现 ZFNet&#xff0c;并在 MNIST 数据集上进行训练和测试。ZFNet&#xff08;ZFNet&#xff09;是基于卷积神经网络&#xff08;CNN&#xff09;的图像分类模型&#xff0c;广泛用于图像识别任务。 环…

【计算机网络实验】之静态路由配置

【计算机网络实验】之静态路由配置 实验题目实验目的实验任务实验设备实验环境实验步骤路由器配置设置静态路由测试路由器之间的连通性配置主机PC的IP测试 实验题目 静态路由协议的配置 实验目的 熟悉路由器工作原理和机制&#xff1b;巩固静态路由理论&#xff1b;设计简单…

driver.js实现页面操作指引

概述 在访问某些网站的时候&#xff0c;第一次进去你会发现有个操作指引&#xff0c;本文引用driver.js&#xff0c;教你在你的页面也加入这般高大上的操作指引。 实现效果 实现 driver.js简介 driver.js是一个功能强大且高度可定制的基于原生JavaScript开发的新用户引导库…

无人机航测技术算法概述!

一、核心技术 传感器技术&#xff1a; GPS/GLONASS&#xff1a;无人机通过卫星定位系统实现高精度的飞行控制和数据采集。 高清相机&#xff1a;用于拍摄地面图像&#xff0c;通过后续图像处理生成三维模型。 激光雷达&#xff08;LiDAR&#xff09;&#xff1a;通过激光扫…

Docker 基础命令介绍和常见报错解决

介绍一些 docker 可能用到的基础命令&#xff0c;并解决三个常见报错&#xff1a; 权限被拒绝&#xff08;Permission Denied&#xff09;无法连接到 Docker 仓库&#xff08;Timeout Exceeded&#xff09;磁盘空间不足&#xff08;No Space Left on Device&#xff09; 命令以…

Java RPC框架的接口预热原理及无损实现

&#x1f680; 博主介绍&#xff1a;大家好&#xff0c;我是无休居士&#xff01;一枚任职于一线Top3互联网大厂的Java开发工程师&#xff01; &#x1f680; &#x1f31f; 在这里&#xff0c;你将找到通往Java技术大门的钥匙。作为一个爱敲代码技术人&#xff0c;我不仅热衷…

java的强,软,弱,虚引用介绍以及应用

写在前面 本文看下Java的强&#xff0c;软&#xff0c;弱&#xff0c;虚引用相关内容。 1&#xff1a;各种引用介绍 顶层类是java.lang.ref.Reference,注意是一个抽象类&#xff0c;而不是接口&#xff0c;其中比较重要的引用队列ReferenceQueue就在该类中定义&#xff0c;子…