【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.xdnf.cn/news/20086.html

如若内容造成侵权/违法违规/事实不符,请联系一条长河网进行投诉反馈,一经查实,立即删除!

相关文章

了解鱼叉式网络钓鱼攻击的社会工程学元素

一提到网络攻击,你可能会想象一个老练的黑客躲在类似《黑客帝国》的屏幕后面,利用自己的技术实力积极入侵网络。然而,许多攻击的现实情况远比这平凡得多。 一封带有“未送达”等无害主题的简单电子邮件被放在员工的垃圾邮件文件夹中。他们心…

TS流详解

目录 TS流结构 PSI 节目关联表(PAT Program Association Table) 条件接收表(CAT Conditional Access Table) 节目映射表(PMT Program Map Table) 网络信息表(NIT Nerwork Information Tabl…

【图像处理识别】数据集合集!

本文将为您介绍经典、热门的数据集,希望对您在选择适合的数据集时有所帮助。 1 CNN-ImageProc-Robotics 机器人 更新时间:2024-07-29 访问地址: GitHub 描述: 通过 CNN 和图像处理进行机器人对象识别项目侧重于集成最先进的深度学习技术和…

C语言--分支循环编程题目

第一道题目&#xff1a; #include <stdio.h>int main() {//分析&#xff1a;//1.连续读取int a 0;int b 0;int c 0;while (scanf("%d %d %d\n", &a, &b, &c) ! EOF){//2.对三角形的判断//a b c 等边三角形 其中两个相等 等腰三角形 其余情…

Windows系统使用全功能的跨平台开源音乐服务器Navidrome搭建在线音乐库

文章目录 前言1. 安装Docker2. Docker镜像源添加方法3. 创建并启动Navidrome容器4. 公网远程访问本地Navidrome4.1 内网穿透工具安装4.2 创建远程连接公网地址4.3 使用固定公网地址远程访问 前言 在数字时代&#xff0c;拥有一个个性化、便捷的音乐库成为了许多人的需求。本文…

监控易DEMO功能深度解析:运维行业的智能化转型新助力

在数字化转型的浪潮中&#xff0c;运维行业正面临着前所未有的变革与挑战。为了应对日益复杂的IT架构和不断提升的运维需求&#xff0c;监控易的集中式跨平台一体化监控软件不断升级优化&#xff0c;以适应新的运维环境。本文将对监控易DEMO的功能进行深度解析&#xff0c;探讨…

ElasticSearch学习篇17_《检索技术核心20讲》最邻近检索-局部敏感哈希、乘积量化PQ思路

目录 场景在搜索引擎和推荐引擎中&#xff0c;对相似文章去重是一个非常重要的环节&#xff0c;另外是拍照识花、摇一摇搜歌等场景都可以使用它快速检索。 基于敏感性哈希的检索更擅长处理字面上的相似而不是语义上的相似。 向量空间模型ANN检索加速思路 局部敏感哈希编码 随…

SpringBoot MySQL的增删改查

创建数据库和表 安装MySQL&#xff1a;https://blog.csdn.net/qq_59636442/article/details/141926105 通过Navicat 创建数据库test 创建表student后随便添加一条数据 CREATE TABLE student (id int NOT NULL AUTO_INCREMENT,name varchar(255) DEFAULT NULL,email varchar(2…

23种设计模式-备忘录(Memento)设计模式

文章目录 一.什么是备忘录设计模式&#xff1f;二.备忘录模式的特点三.备忘录模式的结构四.备忘录模式的优缺点五.备忘录模式的 C 实现六.备忘录模式的 Java 实现七.总结 类图&#xff1a; 备忘录设计模式类图 一.什么是备忘录设计模式&#xff1f; 备忘录设计模式&#xff08…

如何删除pdf里的任意一页?删除PDF里任意一页的几种方法

如何删除pdf里的任意一页&#xff1f;尽管PDF文件具有许多优点&#xff0c;如跨平台兼容性和格式保真性&#xff0c;但在编辑和修改方面&#xff0c;它与像Word或Excel这类文档格式不同&#xff0c;通常不能像其他文档那样轻松进行直接的内容删除或修改。这让很多人以为&#x…

css3新特性(二十六课)

1、css3盒子模型 box - sizing: content - box&#xff1b; 是 CSS 中用于定义盒模型宽度和高度计算方式的一个属性值。在这种盒模型下&#xff0c;元素的宽度和高度&#xff08;width和height属性&#xff09;仅包括内容区域&#xff08;content&#xff09;的大小&#xff…

Centos7安装Jenkins脚本一键部署

公司原先Jenkins二进制安装&#xff0c;自己闲来无事在测试主机优化了一下&#xff0c;一键部署&#xff0c;jenkins2.426版本jdk11版本 #!/bin/bashjenkins_file"jenkins-2.426.3-1.1.noarch.rpm"# 更新软件包列表 echo "更新软件包列表..." sudo yum up…

类与对象(c++)——取地址运算符重载,初始化列表,类型转换

1.取地址运算符重载 1.1 const成员函数 a)将const修饰的成员函数称之为const成员函数&#xff0c;const修饰成员函数放到成员函数参数列表的后 ⾯。 b)const实际修饰该成员函数隐含的this指针&#xff0c;表明在该成员函数中不能对类的任何成员进⾏修改。 const 修饰Date类的…

形态学图像处理(Morphological Image Processing)

形态学图像处理(Morphological Image Processing) 前言 ‍ 本博客为个人总结数字图像处理一课所写&#xff0c;并给出适当的扩展和相应的demo。 写博客跟做 checkpoint​ 很像&#xff0c;毕竟个人还不能达到那种信手拈来的境界&#xff0c;忘了就是从零开始训练&#xff0…

如何在K8s集群中管理与使用GPU

背景 随着人工智能的兴起&#xff0c;GPU作为重要的智算算力类型愈发受到重视&#xff0c;而Kubernetes&#xff08;k8s&#xff09;作为业界主流的集群管理系统&#xff0c;如何方便管理、使用GPU也是其需要解决的一大问题&#xff0c;故此收集整理了K8s管理与使用GPU的相关资…

kubepi管理k8s集群,演示如何连接阿里云k8s容器

一、背景 对k8s容器运维的过程中&#xff0c;如果是自建k8s的话&#xff0c;一般会安装dashboard&#xff0c;方便管理&#xff1b;如果是阿里云k8s容器&#xff0c;它是有提供web ui&#xff0c;但是它有个不便之处–需要定期登录&#xff0c;且缺少命令控制台。 当你需要使…

Conda 安装纯净版ComfyUI

网上有很多整合包&#xff0c; 我个人喜欢纯净版&#xff0c; 自已搭建 1 拉代码 git clone https://github.com/comfyanonymous/ComfyUI 如果没有装过git,下载安装: https://git-scm.com/ https://git-lfs.com/ 2 创建环境 cd ComfyUI conda create -n ComfyUI python3.11…

LeetCode:700. 二叉搜索树中的搜索

目录 题目描述: 代码: 题目描述: 给定二叉搜索树&#xff08;BST&#xff09;的根节点 root 和一个整数值 val。 你需要在 BST 中找到节点值等于 val 的节点。 返回以该节点为根的子树。 如果节点不存在&#xff0c;则返回 null 。 示例 1: 输入&#xff1a;root [4,2,7,1,3…

摄影:相机控色

摄影&#xff1a;相机控色 白平衡&#xff08;White Balance&#xff09;白平衡的作用&#xff1a; 白平衡的使用环境色温下相机色温下总结 白平衡偏移与包围白平衡包围 影调 白平衡&#xff08;White Balance&#xff09; 人眼看到的白色&#xff1a;会自动适应环境光线。 相…

【大选】2024年美国总统选举数据分析可视化

前言 • &#x1f453; 可视化主要使用 Plotly • &#x1f50e; 数据处理主要使用 pandas • &#x1f449; 本文是我自己在和鲸社区的原创 1.项目背景描述 2024年美国大选是该国政治生活中的重要事件&#xff0c;吸引了全球的关注。本报告通过对选举数据的分析&#xff0c…