若依移动端Ruoyi-App——上传图片使用compressorjs处理图片压缩，自动计算压缩比率
背景：
（1）uniapp图片上传存在图片太大，上传时间长的问题，需要将图片压缩上传，
（2）图片压缩比率因大小不同而不同。
（3）uniapp.compressImage不支持h5，而且只能压缩jpg文件
解决方案：
’本文使用uniapp的uni-file-picker进行图片上传，uview的图片上传也可以参考使用。
（1）先把图片都转换为jpg格式文件
（2 ）然后计算压缩比率。压缩率compressorjs使用的范围是0-1，uniapp.compressImage使用的是0-100，需要转换下。
（3）最后h5压缩使用compressorjs，非h5压缩使用uniapp.compressImage。
（4）部署到服务器，修改nginx默认长传文件的大小
效果如下
1. 图片压缩首先安装compressorjs
npm install compressorjs --save2. 创建imageCompress.js，使用图片压缩，本文压缩后返回的类型是blob
import Compressor from 'compressorjs';
// 只能对jpeg格式的图片进行转换
/**
* @param image 图片
* @param backType 需要返回的类型blob,file
* @param quality 图片压缩比 0-1,数字越小，图片压缩越小
* @returns
*/
export default function ImageCompressor(image, backType, quality) {
return new Promise((resolve, reject) => {
new Compressor(image, {
quality: quality || 0.6,
success(result) {
let file = new File([result], image.name, { type: image.type })
if (!backType || backType == 'blob') {
resolve(result)
} else if (backType == 'file') {
resolve(file)
} else {
resolve(file)
}
},
error(err) {
console.log('图片压缩失败---->>>>>', err)
reject(err)
}
})
})
}
3. 创建ConvertImage.js将非jpeg图片转化成jpeg图片
// 思路是创建一个图片，将file等于这个图片，然后创建一个canvas图层 ，将canvas等比例缩放，
//然后用canvas的drawImage将图片与canvas合起来，然后在把canvas的base64转成file即可
export default function ConvertImage(file) {
return new Promise((resolve, reject) => {
const fileName = file.name.substring(0, file.name.indexOf('.'));
let reader = new FileReader(); //读取file
reader.readAsDataURL(file);
reader.onloadend = function (e) {
let image = new Image() //新建一个img标签（还没嵌入DOM节点)
image.src = e.target.result //将图片的路径设成file路径
image.onload = function () {
let canvas = document.createElement('canvas'),
context = canvas.getContext('2d'),
imageWidth = image.width,
imageHeight = image.height,
data = ''
canvas.width = imageWidth
canvas.height = imageHeight
context.drawImage(image, 0, 0, imageWidth, imageHeight)
data = canvas.toDataURL('image/jpeg')
var newfile = dataURLtoFile(data, fileName + '.jpeg');
resolve(newfile)
}
}
})
}
function dataURLtoFile(dataurl, filename) { // base64转file对象
let arr = dataurl.split(','),
mime = arr[0].match(/:(.*?);/)[1],
bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = bstr.charCodeAt(n);
}
return new File([u8arr], filename, { type: mime }); //转成了jpeg格式
}3. 图片压缩页面的代码如下
（1）压缩比率计算
getCompressionRatio(fileSize) {
const multiple = (fileSize / this.fileMaxSize).toFixed(2) // 获取文件大小倍数，生成质量比
alert(fileSize+"==="+this.fileMaxSize+"==="+multiple)
let compressionRatio = 1
if(multiple > 5) {
compressionRatio = 0.5
} else if (multiple > 4) {
compressionRatio = 0.6
} else if (multiple > 3) {
compressionRatio = 0.7
}else if (multiple > 2) {
compressionRatio = 0.8
} else if (multiple > 1) {
compressionRatio = 0.9
} else {
compressionRatio = 2
}
return compressionRatio;
},（2）压缩
// #ifdef H5
imgtemp = await ImageCompressor(imgtemp, 'blob', compressionRatio); //图片压缩
console.log('压缩后文件' + imgtemp.fileName + '====大小'+imgtemp.size)
url = window.URL.createObjectURL(imgtemp)
// #endif
// #ifndef H5
this.compressImg(e.tempFilePaths[i],compressionRatio*100,url)
// #endif（3）H5压缩后是blob，需要转bloburl
使用uni.uploadFile上传文件，filePath使用的是bloburl本地地址，blob:http://localhost:9092/e9a9042b-feab-4fed-99ff-81c1e6efdece
uni.uploadFile({
url: '/prod-api/common/upload', //后端用于处理图片并返回图片地址的接口
filePath:tempFilePath,
...
})因此需要将压缩后的blob文件转换成bloburl，这样才能展示及上传
let url = window.URL.createObjectURL(newImg)
4.部署到服务器，修改nginx默认长传文件的大小
部署到服务器，出现 Request Entity Too Large问题
通过nginx发现服务代理的，问题就出现nginx服务器上，原来nginx默认长传文件的大小是1M，可在nginx的配置中修改。
解决方法：
（1）打开nginx服务的配置文件nginx.conf, 路径一般是：/usr/local/nginx/conf/nginx.conf。
（2）在http{}中加入client_max_body_size 100m，我这里配置的是100M。
http {
client_max_body_size 100m;
include mime.types;
default_type application/octet-stream;
（3）重新nginx服务。