hfysite/components/public/uploadFile.vue

<script>
const acceptMap = {
  0: '*/*',
  1: 'image/*',
  2: 'video/*',
  3: 'audio/*',
  // svg
  4: 'image/svg+xml',
};
export default {
  name: 'uploadFile',
  props: {
    //   多选
    multiple: {
      type: Boolean,
      default: false
    },
    // 类型限制 0: all 1: image 2: video 3: audio
    type: {
      type: Number,
      default: 0
    },
    customAccept : {
      type: String,
      default: ''
    },
    // 是否预览选择的资源
    preview: {
      type: Boolean,
      default: false
    },

  },
  data(){
    return {
    }
  },
  computed:{
    acceptComputed(){
      if(this.customAccept){
        return this.customAccept;
      }
      return acceptMap[this.type]?acceptMap[this.type]:acceptMap["0"];
    },
  },
  methods: {
    changeHandle(e) {
      console.log(e)
      console.log(e.target.files)
      let files = e.target.files;
      if(files.length === 0){
        return;
      }
      this.$emit('change',files);
    }
  }

}
</script>

<template>
<div class="uploadFile">
  <div class="showTips">
    <slot>
        <div class="showTips-con-text">点击上传</div>
    </slot>
  </div>

  <input type="file"
         :multiple="multiple"
         :accept="acceptComputed"
          @change="changeHandle"
  />
</div>
</template>

<style scoped>
.uploadFile{
  width: 100%;
  height: 100%;
  position: relative;
}
.uploadFile input{
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
}
.uploadFile .showTips{
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  cursor: pointer;
}
.showTips .showTips-con-text{
  color: #fff;
  font-size: 24px;
  font-weight: bold;
  background-color: #6c6c6c;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

</style>