Element-UI 文件手动上传

  1.:auto-upload="false"  是否在选取文件后立即进行上传

<template>
  <el-dialog
    v-if="visible"
    top="10%"
    width="21%"
    :close-on-click-modal="false"
    :visible="visible"
    :title="title"
    :append-to-body="appendToBody"
    @close="closeDialog"
  >
    <div class="dialog-body">
      <el-upload
        ref="uploadRef"
        class="upload-demo"
        action         
        drag
        accept=".xls,.xlsx"
        :multiple="false"
        :auto-upload="false"
        :show-file-list="true"
        :limit="1"
        :http-request="upload"
        :on-remove="handleRemove"
        :on-exceed="handleExceed"
        :on-change="handleChange"
      >
        <!--  :on-success="uploadSuccess"
        :before-upload="uploadSuccess" 
       :on-preview="handlePreview"
      -->
        <!--   :file-list="fileList" -->
        <div slot="trigger" class="el-upload__text">
          <i class="el-icon-upload"></i>
          <span>
            将文件拖到此处，或

            <em>点击上传</em>
          </span>
        </div>
      </el-upload>

      <el-button style="margin-left: 10px; margin-right: 10px" size="small" type="primary" @click="handleSubmit">
        上传
      </el-button>
    </div>
  </el-dialog>
</template>

<script lang="ts">
import Vue from 'vue';
import Component from 'vue-class-component';
import { Emit, Prop } from 'vue-property-decorator';

@Component<UploadDialog>({
  components: {},
})
export default class UploadDialog extends Vue {
  $refs!: {
    uploadRef: any;
  };

  @Prop({ type: Boolean, default: false })
  appendToBody!: boolean;

  @Prop({ type: Boolean, default: false })
  visible!: boolean;

  title = '文件上传';

  //选中文件列表
  fileList = [];

  @Emit('beforeClose')
  handleCloseDialog() {
    return;
  }

  @Emit('opened')
  afterOpened() {
    return;
  }

  @Emit('closeDialog')
  closeDialog() {
    return;
  }

  @Emit('handleUpload')
  upload(param) {
    let formData = new FormData(); // FormData 对象
    formData.append('file', param.file); // 文件对象
    return formData;
  }

  handleChange(file, fileList) {
    this.fileList = fileList;
    // 文件选择或者拖拽完成后会触发 change 事件
  }

  handleRemove(file, fileList) {
    this.fileList = fileList;
  }

  handleExceed() {
    this.$message.warning('文件数量超出限制');
  }
//手动提交方法
  handleSubmit() {
    if (this.fileList.length !== 0) {
      this.$refs.uploadRef.submit();
    } else {
      this.$message.warning('需要选取要上传的文件');
    }
  }
}
</script>

 2.手动提交后，:http-request="upload"覆盖默认的上传行为，可以自定义上传的实现，调用upload方法处理文件并传递给父组件调用handleUpload向后端发送请求。（需要修改请求头）

  async handleUpload(formData) {
    this.closeUploadDialog();
    const param = formData;
    const requestConfig = {
      headers: {
        'Content-Type': 'multipart/form-data',
      },
    };

    spcUpload(param, requestConfig)//封装的接口方法
      .then(res => {
        if (res.success) {
          this.$message.success('文件上传成功!');
          //上传成功后刷新数据
          this.refreshTable();
        } else {
          this.$message.error('文件上传失败!');
        }
      })
      .catch(() => {
        // this.setLoadingMap('isChartLoading', false);
      });
  }