vue+elementUI的excel文件导入

vue+elementUI的excel文件导入

template模块

	<el-dialog title="导入" :visible.sync="upload.open" width="400px" append-to-body :close-on-click-modal="false">
      <el-upload
          ref="upload"
          :limit="1"
          accept=".xlsx, .xls"
          :headers="upload.headers"
          :action="upload.url"
          :disabled="upload.isUploading"
          :on-progress="handleFileUploadProgress"
          :on-success="handleFileSuccess"
          :auto-upload="false"
          :file-list="excelList"
          :on-remove="onRemoveDr"
          :on-change="onChangeDr"
          drag
        >
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">
            将文件拖到此处，或
            <em>点击上传</em>
          </div>
          <div class="el-upload__tip" style="color:red" slot="tip">提示：仅允许导入“xls”或“xlsx”格式文件！</div>
        </el-upload>
        <el-button size="mini" type="success" @click="downloadImportTemplate">下载模板</el-button>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="submitFileForm">导 入</el-button>
          <el-button @click="cancelFileForm">取 消</el-button>
        </div>
    </el-dialog>

Script模块

	import { Loading } from "element-ui";
	import axios from 'axios'
	data() {
	    return {
	      upload: {
	          open: false,// 是否显示弹出层（用户导入）
	          title: "",// 弹出层标题（用户导入）
	          isUploading: false,// 是否禁用上传
			  url: ""// 上传的地址
	      },
	      excelList:[],//上传的文件
	 	}
	 }
	//导入按钮
    handleImport(){
      this.upload.open = true;  
    },
    //导入提交
    submitFileForm(){
      if (this.excelList.length === 0) {
        this.$message.warning("请选择文件");
        return;
      }
      if (this.excelList.length > 1) {
        this.$message.warning("每次只能提交一个文件");
        return;
      }
      let formData = new FormData();
      this.excelList.forEach((item) => {
        formData.append("file", item.raw);
        formData.append('tax', this.selectFile.tax)//要传的参数
        formData.append('receiptType', this.selectFile.receiptType)//要传的参数
        console.log(item.raw);
      });
      console.log(formData.get("file"));
      let loadingInstance = Loading.service({
        lock: true, //lock的修改符--默认是false
        text: "导入中", //显示在加载图标下方的加载文案
        spinner: "el-icon-loading", //自定义加载图标类名
        background: "rgba(0, 0, 0, 0.7)", //遮罩层颜色
        target: document.querySelector("#futureTransferDialog"), //loadin覆盖的dom元素节点
      });
      const url = 'billingPlan/importBillingPlanIncludeContractId'
      this.spinning = true
      axios({
          method: 'post',
          url: url, // 请求地址
          data: formData, // 参数
          contentType: false,
          clearForm: true, // 提交后是否清空表单数据
          headers: {
           'Content-Type': 'multipart/form-data;charset=utf-8',
          },
	  }).then(
          (response) => {
            console.log(response)
 			if (response.headers.code == 200) {
				this.excelList = [];
              	this.selectFile={}
              	loadingInstance.close();
              	this.$message.success('导入成功！')
              	this.upload.open = false;
                this.spinning = false
				this.loadData()
             	return false
            }
      		if (response.headers.code == 10001) {
              	this.$message.error('导入失败，缺少参数')
         		this.spinning = false
              	this.isDisable = false
              	return false
            }
            if (response.headers.code == 10002) {
              	this.$message.error('文件不能大于10MB')
              	this.spinning = false
              	this.isDisable = false
              	return false
            }
            if (response.headers.code == 10003) {
              	this.$message.error('文件后缀必须是xls或是xlsx')
              	this.spinning = false
              	this.isDisable = false
              	return false
            }
            if (response.headers.code == 10004) {
              	this.$message.error('导入格式存在错误，请检查')
              	this.spinning = false
              	this.isDisable = false
              	return false
            }
            if (response.headers.code == 10005) {
              	this.$message.error('导入内容为空，请检查')
              	this.spinning = false
              	this.isDisable = false
              	return false
            }
            if (response.headers.code == 500) {
              	this.$message.error('导入异常')
              	this.spinning = false
              	this.isDisable = false
              	return false
            }
            if (response.headers.code == 1020) {
              	this.$message.error('导入失败，请查看错误信息')
             	this.spinning = false
              	this.isDisable = false
            	resolve(response.data)
	            let blob = new Blob([response.data], {
	             	type: 'application/vnd.ms-excel',
	            })
              	let fileName = '开票计划导入——错误信息' + '.xls'
              	if (window.navigator.msSaveOrOpenBlob) {
              		navigator.msSaveBlob(blob, fileName)
              	} else {
	              	var link = document.createElement('a')
	              	link.href = window.URL.createObjectURL(blob)
	              	link.download = fileName
	                link.click()
	                // 释放内存
	                window.URL.revokeObjectURL(link.href)
              	}
              	return false
            },
          (err) => {
            reject(err)
          }  
    },
	//下载导入模板
	downloadImportTemplate(){
		window.location.href = "https://xxxxxxxxxxxx"
	},
	// 文件上传成功处理
	handleFileSuccess(response, file, fileList) {
		this.excelList = fileList;
	},
	// 文件上传中处理
	handleFileUploadProgress(event, file, fileList) {
		this.upload.isUploading = true;
	},
	onChangeDr(file, fileList) {
		this.excelList = fileList;
	},
	onRemoveDr(file, fileList) {
		this.excelList = fileList;
	},
	cancelFileForm(){
	 	this.upload.open = false
		this.excelList = [];
		this.selectFile={}
	},