yxk_pc_mdh/src/components/Dialog/dialogImportFile.vue

<template>
  <el-dialog
    :title="title"
    :visible.sync="dialogVisible"
    :close-on-click-modal="false"
    width="500px"
    @close="handleClose"
  >
    <el-form ref="uploadForm" :model="form" label-width="80px">
      <el-form-item label="选择文件">
        <el-upload
          ref="upload"
          class="upload-demo"
          action="#"
          drag
          :http-request="customUpload"
          :headers="uploadHeaders"
          :data="uploadData"
          :before-upload="beforeUpload"
          :on-success="handleSuccess"
          :on-error="handleError"
          :on-change="handleChange"
          :auto-upload="false"
          :file-list="fileList"
          accept=".xlsx,.xls"
        >
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
          <div class="el-upload__tip" slot="tip">
            只能上传Excel文件，且不超过10MB
          </div>
        </el-upload>
      </el-form-item>
    </el-form>

    <span slot="footer" class="dialog-footer">
      <el-button @click="handleClose">取 消</el-button>
      <el-button type="primary" @click="submitUpload" :loading="uploading">
        {{ uploading ? '上传中...' : '确 定' }}
      </el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  name: 'DialogImportFile',
  props: {
    title: {
      type: String,
      default: '导入Excel文件'
    },
    uploadData: {
      type: Object,
      default: () => ({})
    },
    uploadHeaders: {
      type: Object,
      default: () => ({})
    },
    source: {
      type: String,
      default: ''
    },
    visible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      dialogVisible: this.visible,
      fileList: [],
      uploading: false,
      form: {}
    };
  },
  watch: {
    visible(newVal) {
      this.dialogVisible = newVal;
    }
  },
  methods: {
    handleClose() {
      this.$emit('update:visible', false);
      this.$emit('close');
      this.$refs.upload.clearFiles();
      this.fileList = [];
    },

    handleChange(file, fileList) {
      this.fileList = fileList.slice(-1);
    },

    beforeUpload(file) {
      const isExcel =
        file.type === 'application/vnd.ms-excel' ||
        file.type ===
          'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet';
      const isLt10M = file.size / 1024 / 1024 < 10;

      if (!isExcel) {
        this.$message.error('只能上传Excel文件！');
        return false;
      }

      if (!isLt10M) {
        this.$message.error('上传文件大小不能超过10MB！');
        return false;
      }

      return true;
    },

    // 自定义上传方法
    async customUpload(options) {
      const { file, onSuccess, onError } = options;
      try {
        const formData = new FormData();
        formData.append('file', file);
        this.$api.salesAPI.importAllFile(formData,this.source).then(response => {
            console.log('上传成功', response);
          }).catch(error => {
            console.error('上传失败', error);
          });

        } catch (error) {
          onError(error);
        }
    },

    submitUpload() {
      if (this.fileList.length === 0) {
        this.$message.warning('请先选择文件');
        return;
      }

      this.uploading = true;
      this.$refs.upload.submit();
    },

    handleSuccess(response, file, fileList) {
      this.uploading = false;
      this.$message.success('文件上传成功');
      const _self = this;
      setTimeout(() => {
        _self.$emit('success', response, file, fileList);
        _self.handleClose();
      }, 1000);
    },

    handleError(error, file, fileList) {
      this.uploading = false;
      this.$message.error('文件上传失败');
      this.$emit('error', error, file, fileList);
    }
  }
};
</script>

<style scoped>
.upload-demo {
  width: 100%;
}
.dialog-footer{
  padding-right: 20px;
  box-sizing: border-box;
}
</style>