vue 文件： 自行引用 elemen-ui
<el-upload
action=" 让后端给你上传地址 "
list-type="picture-card"
accept="image/*"
:limit="1"
:file-list="productImgs"
:multiple="isMultiple"
:on-preview="handlePictureCardPreview"
:on-remove="handleRemove"
:on-success="handleAvatarSuccess"
:before-upload="beforeAvatarUpload"
:on-exceed="handleExceed"
:on-error="imgUploadError">
<i class="el-icon-plus"></i>
</el-upload>
<el-dialog :visible.sync="dialogVisible">
<img width="100%" :src="image" alt="">
</el-dialog>
data：
image: '',
dialogVisible: false,
productImgs: [],
isMultiple: true,
methods:
handleRemove(file, fileList) {//移除图片
this.$message.success("删除图片成功")
},
handlePictureCardPreview(file) {//预览图片时调用
this.image = file.url;
this.dialogVisible = true;
},
beforeAvatarUpload(file) {//文件上传之前调用做一些拦截限制
const isLt2M = file.size / 1024 / 1024 < 2;
//格式限制
var testmsg=file.name.substring(file.name.lastIndexOf('.')+1)
const extension = testmsg === 'png'
const extension2 = testmsg === 'jpg'
if(!extension && !extension2) {
this.$message({
message: 'icon 图只能是 png / jpg 格式!',
type: 'warning'
});
return false;//必须加上return false; 才能阻止
}
// 大小限制
if (!isLt2M) {
this.$message.error('上传图片大小不能超过 2MB!');
}
// 宽高限制
const isSize = new Promise(function(resolve, reject){
let width = 400;
let height = 400;
let _URL = window.URL || window.webkitURL;
let img = new Image();
img.onload = function(){
let valid = img.width == width && img.height == height;
valid ? resolve() : reject();
}
img.src = _URL.createObjectURL(file);
}).then(()=>{
return file;
}, ()=>{
this.$message({
message:'icon图尺寸只能是400*400px!请重新选择!',
type: 'warning'
});
return Promise.reject()
return false;//必须加上return false; 才能阻止
})
return jp&& isLt2M && isSize;
},
handleAvatarSuccess(res, file) {//图片上传成功
console.log(res);
console.log(file);
this.imageUrl = URL.createObjectURL(file.raw);
},
handleExceed(files, fileList) {//图片上传超过数量限制
this.$message.error('上传图片不能超过6张!');
},
imgUploadError(err, file, fileList){//图片上传失败调用
this.$message.error('上传图片失败!');
}