标签：vue contentType default Upload fileList element file type png

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"
  }
]

}

}

标签：vue,contentType,default,Upload,fileList,element,file,type,png
来源： https://blog.csdn.net/qq_23064501/article/details/88537513

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。