<template>
|
<div >
|
<el-upload
|
action=""
|
:disabled="disabled"
|
list-type="picture-card"
|
:file-list="fileList"
|
:http-request="handleUpload"
|
:beforeUpload="beforeUploadImg"
|
:on-success="handleSuccess"
|
:on-error="handleError"
|
:on-preview="handlePreview"
|
:on-remove="handleRemove"
|
>
|
<i class="el-icon-plus"></i>
|
</el-upload>
|
<el-dialog :visible.sync="dialogVisible" :modal="false">
|
<img width="100%" :src="dialogImageUrl" alt="">
|
</el-dialog>
|
</div>
|
</template>
|
|
|
<script>
|
|
import {emergencyPlanUpload} from "@/api/emergencyplan.js";
|
|
export default {
|
props: {
|
disabled: {//是否可用
|
type: Boolean,
|
default:false
|
},
|
imgList: {//存储路径
|
type: Array,
|
default:[]
|
},
|
},
|
data() {
|
return {
|
dialogImageUrl: '',
|
dialogVisible: false,
|
|
fileList:[],
|
fileUrl:"",
|
fileName:"",
|
|
};
|
},
|
watch:{},
|
created:function () {},
|
mounted(){
|
|
if (this.imgList!=null){
|
for(let i = 0 ;i < this.imgList.length ; i++){
|
this.imgList[i].url = process.env.IMG_API + 'emergencyPlan/'+this.imgList[i].fileName
|
this.fileList.push(this.imgList[i])
|
}
|
}
|
},
|
methods: {
|
handleRemove(file, fileList) {
|
for (let a = 0;a<this.fileList.length;a++){
|
if(file.uid == this.fileList[a].uid){
|
this.fileList.splice(a,1);
|
}
|
}
|
this.$nextTick(() => {
|
this.$emit('removeImgSuccess', {
|
fileList:this.fileList
|
});
|
});
|
},
|
handlePreview(file) {
|
this.dialogImageUrl = file.url;
|
this.dialogVisible = true;
|
},
|
beforeUploadImg(file) {
|
const isJPG = file.type === 'image/jpeg';
|
const isPNG = file.type === 'image/png';
|
if (!isJPG && !isPNG) {
|
this.$message.error('上传图片只能是 JPG 或者 PNG 格式!');
|
}
|
return (isJPG || isPNG) ;
|
},
|
handleError(err, file, fileList){
|
this.$message.error('上传失败，系统未知错误！错误码为【500】');
|
},
|
handleUpload(param){
|
let formData = new FormData();
|
formData.append('file', param.file); //添加键值
|
emergencyPlanUpload(formData).then(res=>{
|
if (res.data.code==200){
|
this.fileUrl = res.data.result.fileUrl
|
this.fileName = res.data.result.fileName
|
this.$nextTick(() => {
|
this.$emit('uploadImgSuccess', {
|
fileName: this.fileName,
|
fileUrl: this.fileUrl,
|
url:process.env.IMG_API + 'emergencyPlan/'+res.data.result.fileName
|
});
|
});
|
this.$message({
|
type:'success',
|
message:'上传成功',
|
duration:2000,
|
})
|
} else{
|
this.$message.error('上传失败，系统未知错误！');
|
}
|
})
|
},
|
handleSuccess(response, file, fileList) {
|
},
|
}
|
}
|
</script>
|
