ps:有时候我们后台在上传商品主图的时候，必须是上传1：1的正方形图；解决方案是在上传图片之前判断是否是方形图片；因为是后台系统，所以我这里用的是elememt-ui框架；
一、element上传图片控件el-upload；
headers是放置上传图片的请求头；一般会放token信息；
multiple是否支持多选，false是不支持，true是支持
show-file-list是否显示已上传文件列表，false是不显示，true是显示
handleAvatarSuccess 这个是上传图片成功的方法，在这个方法里面我一般是会把上传返回的链接赋值到需要提交数据的数组中；
action是上传到后台的地址，如果需要额外传参，可以用data属性；
accept是接受哪些上传图片格式；
beforeUpload是上传文件之前的钩子，参数为上传的文件，若返回 false 或者返回 Promise 且被 reject，则停止上传。
<el-upload
class="avatar-uploader"
:headers="headers"
:multiple="false"
:show-file-list="false"
:on-success="handleAvatarSuccess"
:beforeUpload="beforeAvatarUpload"
:action="url"
accept=".jpg,.jpeg,.png,.JPG,.JPEG,.PNG,.gif,.GIF"
>
<i class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
data(){
return{
headers: { 'Authorization': 'token' },
url:'' //这个是后台地址
}
}
二、上传图片方法；
beforeAvatarUpload：是上传图片之前的调用的方法；因为beforeUpload上传图片返回Promise为reject 也不会上传，所以我这里就用了Promise
beforeAvatarUpload(file) {
return new Promise((resove,reject)=>{
const isJPG = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/jpg' || file.type === 'image/gif'; //这里判断是否是JPG、GIF或者png
const isLt2M = file.size / 1024 / 1024 < 2; //判断是否大于2M
if (!isJPG) {
this.$message.error('上传头像图片只能是 JPG、GIF或者png 格式!');
return reject(false)
}
if (!isLt2M) {
this.$message.error('上传头像图片大小不能超过 2MB!');
return reject(false)
}
this.limitFileWh(file).then(res=>{
return res?resove(res):reject(res) //这里接收limitFileWh的promise
})
})
},
limitFileWh(file){
const isSize = new Promise(function(resolve,reject){
const reader = new FileReader();
reader.onload = (e) => {
const img = new Image();
img.onload = () => {
img.width===img.height ? resolve() :reject(); //因为判断图片是否是1：1，所以直接判断图片的宽度很高度是否相同，如果是就返回resolve，不是就返回reject
console.log('图片宽度:', img.width);
console.log('图片高度:', img.height);
};
img.src = e.target.result;
};
// 读取图片
reader.readAsDataURL(file);
}).then(()=>{
return true; //这里是图片宽高相同的返回
},()=>{
this.$message.error('请上传正方形图片!'); //这里是图片宽高不相同的返回，并弹出弹窗；
return false;
})
return isSize;
},
//上传成功
handleAvatarSuccess(res, file) {
console.log("res",res);
this.productPicList.push(res.data.full_path);
// this.form.productPic = this.productPicList;
},
