去年公司做的微信端项目，用的Vue，现在有时间，总结下图片上传。
图片这块我用的是vant-ui，肯定要在项目中导入vant-ui。主要是在afterRead()方法中，对图片进行压缩，然后再上传。
这是删除方法：
下面是图片处理方法的代码，图片上传的url要改成自己的
afterRead(item) {
item.status ='uploading';
item.message ='上传中...';
let formData =new FormData();
// 最大尺寸限制，可通过设置宽高来实现图片压缩程度
let maxWidth =500,
maxHeight =500;
let file = item.file;
let reader =new FileReader(),
img =new Image();
reader.readAsDataURL(file);
// 文件base64化，以便获知图片原始尺寸
reader.onload =function(e) {
img.src = e.target.result;
};
new Promise((resolve, reject) =>{
img.onload =function() {
let originWidth =this.width;
let originHeight =this.height;
// 目标尺寸
let targetWidth = originWidth,
targetHeight = originHeight;
// 压缩图片
if(originWidth > maxWidth || originHeight > maxHeight) {
if(originWidth / originHeight > maxWidth / maxHeight) {
targetWidth = maxWidth;
targetHeight = Math.round(maxWidth * (originHeight / originWidth));
}else {
targetHeight = maxHeight;
targetWidth = Math.round(maxHeight * (originWidth / originHeight));
}
}
// 创建画布
let canvas = document.createElement('canvas');
canvas.width = targetWidth;
canvas.height = targetHeight;
// 清除画布
let context = canvas.getContext('2d');
context.clearRect(0, 0, targetWidth, targetHeight);
// 图片压缩
context.drawImage(img, 0, 0, targetWidth, targetHeight);
// base64 转 file
let newUrl = canvas.toDataURL('image/jpeg', 0.92);
file = _self.dataURLtoFile(newUrl, file.name);
formData.append(file.name, file);
// 新建请求
const xhr =new XMLHttpRequest();
xhr.open('POST', _self.utils.rootUrl+'repairCross/upload', true)
xhr.send(formData);
xhr.onload = () => {
if (xhr.status ===200 || xhr.status ===304) {
let datas = JSON.parse(xhr.responseText);
// 上传成功
if (datas.state ==1) {
let response = datas.data;
// console.log('response = ', response);
item.status ='done';
item.message ='上传成功';
// _self.uploadImgUrl.push(response.fileId);
resolve(response.fileId);
}
}
else {
reject();
console.log('上传失败');
}
}
}
}).then((fileId) => {
// console.log('fileId = ', fileId);
this.uploadImgUrl.push(fileId);
});
},
使用的时候，首先到导入这个组件
要获取图片的id时，直接用 this.$refs.uploader.uploadImgUrl 就可以。
希望可以帮到有需要的同学。