vue element-ui Upload 上传文件图片再次封装

1、添加组件名UploadFile

<template>

  <div class="upload-container">
    <el-dialog :visible.sync="dialogVisibleImg" :title="ImgName"  append-to-body="true">
      <img width="100%" :src="dialogImageUrl" alt="">
    </el-dialog>
    <el-upload :class="[disabledInput? 'upLoadShowNone':'']"
               class="upload-demo"
               :accept="accept"
               :action="UploadUrl()"
               :multiple="multiple"
               :on-remove="handleRemove"
               :on-success="handleSuccess"
               :on-preview="handlePictureCardPreview"
               :disabled="disabledInput"
               list-type="picture"
               :file-list.sync="fileList">
      <el-button :size="size" :type="type"  icon="el-icon-upload" :plain="plain">
        {{btnMSg}}
      </el-button>
      <!--<el-button size="small" type="primary" >点击上传</el-button>-->
      <!--<div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>-->
    </el-upload>
  </div>
</template>

<script>
  // <!--accept=".png,.jpg,.xlsx, .xls"-->
export default {
  name: 'UploadFile',
  props: {
    multiple: {
      type: Boolean,
      default: true
    },
    disabledInput: {
      type: Boolean,
      default: false
    },
    fileList: {
      type: Array,
      default: []
    },
    accept: {
      type: String,
      default: ''
    },
    size: {
      type: String,
      default: 'small'
    },
    type: {
      type: String,
      default: 'primary'
    },
    btnMSg: {
      type: String,
      default: '点击上传'
    },
    plain: {
      type: Boolean,
      default: false
    },
  },
  data() {
    return {
      dialogVisibleImg:false,
      ImgName:'',
      dialogImageUrl:'',
    }
  },
  computed: {
  },
  methods: {
    //上传路径
    UploadUrl:function(){
      // return "http://192.168.199.178:740/base/fus/uploadFile";
      return `${process.env.BASE_API}/base/fus/uploadFile`;
    },
    handleSuccess(res, file,fileList) {
      this.$emit('update:fileList', fileList)
    },
    handleRemove(file, fileList) {
      this.$emit('update:fileList', fileList)
    },
    handlePictureCardPreview(file) {
      let contentType=''
      if(file.contentType){
       contentType = file.contentType.split('/')[0];
      }
      else{
        contentType = file.response.body.contentType.split('/')[0];
      }

      if(contentType=='image'){
        this.dialogImageUrl = file.url;
        this.dialogVisibleImg = true;
        this.ImgName = file.name;
      }
      else{
        window.open(file.url);
      }
    },
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
/*@import "~@/styles/mixin.scss";*/
.upload-container {
  .el-upload{
    text-align: left;
  }
}
</style>

2、使用

<UploadFile :disabledInput="QualificationInput" :fileList.sync="fileList"  />


import UploadFile from '../../components/Upload/UploadFile'

components: { UploadFile },

data(){

return{

fileList:[
  {
    "url": "https://worker.doggadatachina.com/base/fus/files/uAGsD6BOyIIOz0qp0471K7cJ.png",
    "contentType": "image/png",
    "name": "1540519646.png"
  },
  {
    "url": "https://worker.doggadatachina.com/base/fus/files/JRsy1aG_InecWyRnlHrIzjWx.png",
    "contentType": "image/png",
    "name": "a.png"
  },
  {
    "url": "https://worker.doggadatachina.com/base/fus/files/LieNSN4RlhmIaJzzjUnwMgub.png",
    "contentType": "image/png",
    "name": "aaaa.png"
  },
  {
    "url": "https://worker.doggadatachina.com/base/fus/files/J8EwlmKKMfoyjDYCT-A3oGUQ.jpg",
    "contentType": "image/jpeg",
    "name": "ac59c0bfdae840cc.jpg"
  }
]

}

}