vant/packages/uploader/src/main.vue

<template>
    <div class="zan-uploader">
        <slot>
          <div>
             <zan-button block>上传文件</zan-button>
          </div>
        </slot>
        <input type="file" @change="onValueChange"  class="zan-uploader__input" ref="input" />
    </div>
</template>

<script>
  export default {
    name: 'zan-uploader',
    props: {
      disabled: {
        type: Boolean,
        default: false
      },
      beforeRead: Function,
      resultType: {
        type: String,
        default: 'dataUrl',
        validator(value) {
          return value === 'dataUrl' || value === 'text';
        }
      }
    },
    methods: {
      onValueChange(event) {
        if (this.disabled) {
          return;
        }
        var files = event.target.files;
        var file = files[0];
        if (!file) return;
        if (this.beforeRead && !this.beforeRead(file)) return;
        var reader = new FileReader();
        reader.onload = (e) => {
          this.$emit('file-readed',
            {
              name: file.name,
              type: file.type,
              size: file.size,
              content: e.target.result
            });
          this.$refs.input.value = '';
        };
        if (this.resultType === 'dataUrl') {
          reader.readAsDataURL(file);
        } else if (this.resultType === 'text') {
          reader.readAsText(file);
        }
      }
    }
  };
</script>