上传.md

问题发生场景

使用input[type=file] 实现文件上传功能，通过onchange事件触发js代码，这个时候第一次上传是完全没问题的，不过当你第二次上传文件时，如果是不同于上一次上传文件的话是可以正常上传的，不过如果你选择的还是上一个文件，也就是两次上传的文件重复了，那么就会上传失败。

产生问题原因

input是通过onchange事件来触发js代码的，由于两次文件是重复的，所以这个时候onchange事件是没有触发到的。

问题分解

以vue代码示例：

  <div class="excel-upload">
    <input
      v-if="clearFrom"
      ref="excel-upload-input"
      class="excel-upload-input"
      type="file"
      accept=".xlsx, .xls"
      @change="handleClick"
    >
    <el-button type="primary" @click="handleUpload">导入</el-button>
  </div>

点击导入按钮，实际触发input type="file" 的点击事件

handleUpload () {
    this.$refs['excel-upload-input'].click();
}

handleClick 处理上传

handleClick (e) {
    const files = e.target.files;
    const rawFile = files[0]; // only use files[0]
    // 如果有文件格式判断，可在此处添加
    if (!rawFile) return;
    this.clearFrom = false;
    let fd = new FormData();
    fd.append('file', rawFile);
    let config = {
        headers: {
            'Content-Type': 'multipart/form-data'
        }
    };
    this.upload(fd, config);
}

调用upload 之前 设置 clearFrom 为false

upload (fd, rawFile) {
    this.$emit('succeed', { fd, rawFile }, () => {
        this.clearFrom = true;
    });
}

父组件 handle succeed事件后，回调里面 设置 clearFrom 为true