'lct'

Your Name

2022-04-06 37b718547bc441c7502f0bfcf86209efe253851b

 src/views/contingencyplan/uploadImg.vue

对比新文件
@@ -0,0 +1,117 @@
<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>