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('上傳圖片失敗!');
}