platform-customsdeclaration-ssr/components/common/upload.vue

<template>
    <div class="preview">
      <span><i v-if="required">*</i>{{title}}</span>
      <input type="text" v-model="file.name" class="el-input__inner" :placeholder="placeholder">
      <input type="file" :accept="accept" @change="upload">
      <div class="close" @click="closeClick"><i class="el-icon-close"></i></div>
      <a v-if="fileData" class="download" @click="downFileData(fileData)"><i class="el-icon-download"></i></a>
    </div>
</template>

<script>
  export default {
    name: 'uploadView',
    props: ['title', 'required', 'placeholder', 'accept', 'fileData'],
    data () {
      return {
        file: ''
      }
    },
    methods: {
      downFileData (type) {
        window.open(type)
      },
       upload (e) {
        this.file = e.target.files[0]
        this.$emit('uploadEvent', e.target.files[0])
      },
      closeClick () {
        this.$emit('closeEvent', this.file)
        let _this = this
        setTimeout(() => {_this.file = ''}, 300)
      },

    }
  }
</script>

<style scoped type="text/scss" lang="scss">
.preview{
  position:relative;
  display: inline-block;
  width:100%;
  margin-bottom:30px;
  vertical-align:middle;
  font-size: 14px;
  color:#333;
  height:28px;
  line-height: 28px;
  &:hover{
    .close{
      cursor:pointer;
      display:inline-block;
    }
  }
  .download{
    position:absolute;
    right:0;
    top:3px;
    width:22px;
    height:22px;
    line-height: 22px;
    font-size: 24px;
    font-weight: bold;
    text-align: center;
  }
  .close{
    display:none;
    position:absolute;
    right:5%;
    top:3px;
    width:22px;
    height:22px;
    line-height: 22px;
    font-size: 14px;
    font-weight: bold;
    border-radius:50%;
    background: #fff;
    border:1px solid #dcdfe6;
    color:#dcdfe6;
    text-align: center;
  }
  span{
    display:inline-block;
    vertical-align: top;
    width:25%;
    text-align: right;
    float:left;
    padding-right:10px;
    i{
      color: red;
      margin-right:5px;
    }
  }
  input[type=text]{
    height:28px;
    margin:0 5px;
    width:70%;
  }
  input[type=file]{
    position:absolute;
    top:0;
    left:0;
    opacity:0;
    width:90%;
  }
}
</style>