HTML部分
<el-form-item prop="pictures" label="圖片集">
<el-upload
:action="uploadUrls"
:multiple = true
list-type="picture-card"
:with-credentials='true'
:on-preview="handlePictureCardPreview"
:on-remove="handleRemove"
:on-error="handleError"
:on-success="handleAvatarSuccess"
:before-upload="beforeAvatarUpload">
<i class="el-icon-plus"></i>
</el-upload>
<el-dialog :visible.sync="dialogVisible">
<img width="100%" :src="dialogImageUrl" alt="">
</el-dialog>
</el-form-item>複製程式碼JS部分
data: function() {
return {
dialogImageUrl: '',
dialogVisible: false,
uploadUrls: this.BASE_URL + '/admin/upload_image'
}
}複製程式碼methods部分
handleRemove(file, fileList) {//移除
console.log(file, fileList);
},
handlePictureCardPreview(file) {//預覽
console.log(file)
this.dialogImageUrl = file.url;
this.dialogVisible = true;
},
handleError(err, file, fileList){//上傳失敗
console.log(err)
},
beforeAvatarUpload(file) {//檔案上傳之前呼叫做一些攔截限制
console.log(file);
const isJPG = true;
const isLt2M = file.size / 1024 / 1024 < 2;
if (!isLt2M) {
this.$message.error('上傳圖片大小不能超過 2MB!');
}
return isJPG && isLt2M;
},
handleAvatarSuccess(res, file) {//圖片上傳成功
var files = res.data.file;
this.form.pictures.push(files)
this.dialogImageUrl = this.IMAGE_URL + '/image/' + res.data.file;
}複製程式碼圖片上傳成功之後，將圖片地址以陣列的形式展示給後端