<el-upload
ref="upload"
action="#"http://上傳的服務(wù)器地址
:auto-upload="false"http://是否自動(dòng)上傳，false不自動(dòng)上傳
list-type="picture-card"
:on-preview="handlePictureCardPreview"http://圖片預(yù)覽
:on-remove="handleRemove"http://刪除圖片方法
:on-change="(file, fileList) => {uploadSuccess(file, fileList)}" //上傳成功或者失敗都會(huì)調(diào)用on-change
:file-list="imageList" //回顯的列表
>
<i class="el-icon-plus"></i>
</el-upload>
<el-dialog :visible.sync="dialogVisible" append-to-body class="checkPic">
<img width="100%" :src="dialogImageUrl" alt="">//圖片預(yù)覽的彈框
</el-dialog>
export dafault {
data (){
return {
dialogImageUrl: '',
imageList:[],
fileList:[],
}
},
methods:{
//刪除已上傳圖片
handleRemove(file, fileList) {
//file是當(dāng)前刪除的圖片，fileList是已上傳圖片列表
this.imageList =fileList
this.fileList = fileList
},
//圖片預(yù)覽
handlePictureCardPreview(file) {
this.dialogImageUrl = file.url;
this.dialogVisible = true;
},
// 上傳成功時(shí)的鉤子
uploadSuccess(file,fileList){
console.log(fileList)
let that =this
var fileType = file.raw.type;
var isJpg = false;
if (fileType == 'image/jpeg' || fileType == 'image/png' || fileType == 'image/jpg') {
isJpg = true;
}
if (!isJpg) {
this.$message({
message: '上傳的圖標(biāo)只能是jpg、png格式!',
type: 'error'
});
return false
}
this.fileList= fileList
this.imageList =fileList
},
let formList = new FormData();
this.fileList.forEach( (file)=>{
formList.append('fileList', file.raw);
})
//formList就是傳給后臺(tái)的值啦
}
}
