vue上传图片

// 上传限制
beforeAvatarUpload(file) {
const isJPG = file.type === 'image/jpeg';
const isPNG = file.type === 'image/png';
const isLt2M = file.size / 1024 / 1024 < 5;
var isIMG = true;
if (!isJPG) {
if (!isPNG) {
this.$message.error('上传图片只能是 JPG, PNG 格式!');
isIMG = false;
}
}
if (!isLt2M) {
this.$message.error('上传图片大小不能超过 5MB!');
}
return isIMG && isLt2M;
},
//商品图片上传(修改)
handleImgUpload: function(_index, _name, ev) {
var ev = event || window.event,
elem = ev.currentTarget,
imgElem = elem.nextElementSibling,
files = this.uploadImgFn(elem);
this.beforeAvatarUpload(files.fileObj);
imgElem.src = files.fileUrl;
if(_name == 'goods') { //商品图片
this.imgList[_index].fileUrl = files.fileUrl;
} else { //详情图片
this.remarkImgList[_index] = files.fileUrl;
}
this.uploadImg(files.fileObj, _index, _name);
},
//商品图片上传(删除)
handleImgDel: function(_index, _name, ev) {
var ev = event || window.event,
elem = ev.currentTarget,
imgElem = elem.parentElement;
if(_name == 'goods') { //商品图片
this.imgList.splice(_index, 1);
} else { //详情图片
this.remarkImgList.splice(_index, 1);
}
},
//商品图片上传(添加)
addImgUpload: function(_name, ev) {
var ev = event || window.event,
elem = ev.currentTarget,
num = 0,
files = this.uploadImgFn(elem); //获取上传的图片文件
this.beforeAvatarUpload(files.fileObj);
if(_name == 'goods') { //商品图片
num = this.imgList.length;
if(this.imgList.length >= 10) {
this.$message.error('最多只能添加10张图片');
return;
}
var obj = { fileCode: '', fileUrl: files.fileUrl }
this.imgList.push(obj);
} else {//详情图片
num = this.remarkImgList.length;
this.remarkImgList.push(files.fileUrl);
}
this.uploadImg(files.fileObj, num, _name);
elem.value = "";
},
//上传图片接口
uploadImg: function(_files, _index, _name) {
var that = this,
reqUrl = '地址',
formData = new FormData();
formData.append("token", that.token);
formData.append("files", _files);
this.$http.post(reqUrl, { formData: formData }).then(function(res) {
if (!res) { return; }
if(_name == 'goods') {//商品图片
that.imgList[_index].fileUrl = res.richImgs[0].picUrl;
} else {//详情图片
that.remarkImgList[_index] = res.richImgs[0].picUrl;
}
});
},
原文地址:https://www.cnblogs.com/chase-star/p/10033719.html