pc-component-v5/packages/upload-widget/src/UploadWidget.vue

<template>
  <div>
    <input
      ref="fileInput"
      autocomplete="off"
      type="file"
      class="form-control file-input"
      :accept="fileType"
      @change="onFileChange"
    />
    <label for="attachment">
      <a
        role="button"
        class="btn btn-primary btn-sm"
        @click="clickButton"
      >
        <i class="fa fa-upload" />
                &nbsp;
        {{ $t('lang.uploadWidget.uploadFile') }}
      </a>
    </label>
  </div>
</template>

<script>

export default {
  name: 'UploadWidget',
  /**
	 * fileType: 上传文件类型,eg:".xls,.doc,.txt,.pdf"
	 */
  props: {
    'fileType': {
      type: String,
      default: '',
    },
  },

  emits: [ 'upload' ],

  data: function () {
    return {

    };
  },
  methods: {
    /**
     * 点击上传按钮事件
     * @return {[type]} [description]
     */
    clickButton: function () {
      $(this.$refs.fileInput).click();
    },

    /**
     * 选择了文件事件
     * @return {[type]} [description]
     */
    onFileChange: function (e) {
      var files = e.target.files || e.dataTransfer.files;
      if (!files.length)
        return;
      this.$emit('upload', files);
    },
  },
};
</script>


<style scoped>
.file-input {
    width: 0.1px;
    height: 0.1px;
    opacity: 0;
    overflow: hidden;
    position: absolute;
    z-index: -1;
}
</style>