项目场景:
vue + vant 在进行手机端项目进行upload—图片上传的时候,由于当前手机内部图片过大,导致上传缓慢而进行的图片
vant-Uploader 文件上传:
提示:after-read: 文件读取完成后的回调函数
<van-uploader
:max-count="1"
v-model="fileList"
:after-read="afterRead"
:before-delete="deleteFunc"
>
<van-image width="117" height="77" :src="require('@/assets/img/'+ imgUrl)" />
</van-uploader>
具体代码:
提示:这里填写问题的分析:
例如:Handler 发送消息有两种方式,分别是 Handler.obtainMessage()和 Handler.sendMessage(),其中 obtainMessage 方式当数据量过大时,由于 MessageQuene 大小也有限,所以当 message 处理不及时时,会造成先传的数据被覆盖,进而导致数据丢失。
afterRead(file) {
// 此时可以自行将文件上传至服务器
file.status = "uploading";
file.message = "上传中...";
let maxSize = 2 * 1024 * 1024; //自己定义的文件大小,超过多少M就开始压缩(现在是2M)
let fileObj = file.file; // 当前的图片
if (fileObj.size > maxSize) {
this.imgcompress(fileObj, file);
} else {
const formData = new FormData();
formData.append("file", file.file); //此处的文件上传是formData格式
let that = this;
that
.$axios({
method: "post",
url:"图片上传的路径,可以取vant默认的图片地址",
headers: {
"Content-Type": "multipart/form-data"
},
data: formData
})
.then(res => {
file.status = "";
file.message = "";
})
.catch(() => {
file.status = "failed";
file.message = "上传失败";
});
}
},
imgcompress(file, files) {
const img = document.createElement('img')
const reader = new FileReader(); // 读取文件资源实例
reader.readAsDataURL(file); //读取图片资源
reader.onload = e => { //读取成功
img.src = e.target.result;
const { width: originWidth, height: originHeight } = img; //上传的图片的宽高
const maxWidth = 1000, //设置一个canvas 的最大宽高
maxHight = 1000;
if (originWidth > maxWidth || originHeight > maxHight) {
//计算出图片的缩放比例
if (originWidth > originHeight) {
//宽 大于 高
const Proportion = Math.ceil(originWidth / maxWidth);
let targetWidht = parseInt(originWidth / Proportion); //目标的宽度
let targetHeight = parseInt(originHeight / Proportion); //目标的高度
this.createCanvasCompress(targetWidht, targetHeight, img, files);
} else {
const Proportion = Math.ceil(originHeight / maxHight); //高大于宽
let targetWidht = parseInt(originWidth / Proportion); //目标的宽度
let targetHeight = parseInt(originHeight / Proportion); //目标的高度
let bold = this.createCanvasCompress(
targetWidht,
targetHeight,
img,
files
);
}
} else {
let quality = 0.8;
this.createCanvasCompress(
originWidth,
originHeight,
img,
files,
quality
);
}
};
},
createCanvasCompress(targetWidth, targetHeight, img, files, quality) {
let that = this;
return new Promise((resolve, reject) => {
const canvas = document.createElement("canvas");
const context = canvas.getContext("2d");
// 设置宽高度为等同于要压缩图片的尺寸
canvas.width = targetWidth;
canvas.height = targetHeight;
context.clearRect(0, 0, targetWidth, targetHeight);
//将img绘制到画布上
console.log(targetWidth, targetHeight);
context.drawImage(img, 0, 0, targetWidth, targetHeight);
let bold = canvas.toBlob(
function(blob) {
resolve(blob);
const formData = new FormData();
formData.append("file", blob, "xxx.jpg");
that
.$axios({
method: "post",
url:'url',
headers: {
"Content-Type": "multipart/form-data"
},
data: formData
})
.then(res => {
if (res.data.responseCode == 200) {
files.status = "";
files.message = "";
}
})
.catch(() => {
files.status = "failed";
files.message = "上传失败";
});
},
"image/png",
quality
);
});
// 创建画布
},