前端压缩图片总的来说还是转base64 然后等比例放小宽和高? 这个是上次压缩图片的一个扩展
压缩完之后 再将base64 转成blob再转成文件然后再上传? 一生要强的前端崽子（后端不支持base64上传） 自己改吧改吧
// 图片上传
async changePic(e) {
this.isshangchuantupian=true
this.$message.warning('图片资源正在压缩...')
// 获取图片数据
var file = e.target.files[0];
var reader = new FileReader();
reader.readAsDataURL(file);
let ctempfile
let _that = this
reader.onload = await function (event) {
// 压缩图片
var img = new Image();
img.src = event.target.result;
img.onload = function () {
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
var width = img.width
var height = img.height
if (Math.max(width, height) > _that.maximg) {
if (width > height) {
canvas.width = _that.maximg;
canvas.height = _that.maximg * height / width
} else {
canvas.height = _that.maximg
canvas.width = _that.maximg * width / height
}
} else {
canvas.width = width;
canvas.height = height;
}
ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
var dataUrl = canvas.toDataURL('image/jpeg', 0.8); // 压缩后的图片数据
var blob = dataURLToBlob(dataUrl); // 将压缩后的图片数据转换为Blob对象
ctempfile = new File([blob], file.name, { type: 'image/jpeg' }); // 将Blob对象封装为File对象
//console.log(ctempfile)
let formData = new FormData()
// for (let i = 0; i < fileList.length; i++) {
//formData.append('xxxx', fileList[i])
//}
formData.append('update_image', ctempfile)
http
.post('服务器地址', formData)
.then(res => {
//console.log(res.data.update_image)
if (res.data.xxxx) {
_that.isshangchuantupian=false
} else {
_that.$message({
message: '图片上传失败：',
type: 'error'
})
}
})
.catch(err => {
console.log(err)
})
};
};
// 将Base64编码的图片数据转换为Blob对象
function dataURLToBlob(dataUrl) {
var arr = dataUrl.split(','), mime = arr[0].match(/:(.*?);/)[1];
var bstr = atob(arr[1]);
var n = bstr.length;
var u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = bstr.charCodeAt(n);
}
return new Blob([u8arr], { type: mime });
}
//let fileList = e.target.files
},