一文解决Vue中实现Excel下载到本地以及上传Excel

相信大家在项目中经常会遇到一些上传下载文件的相关功能，本文就Excel的相关功能进行简述：

咱直接看代码：

          

            

              

                
+
                
上传Excel文件
              
            
            

              

                {{ fileName }}
                
              
              
尚未选择文件！
              
注意:
              

                1. 请按照Excel表格模板内字段格式进行上传
              
              
2. 导入表格数量控制在10000条以内
              

                3. Excel表格模板点击下载:Excel表格模板
              
            
            
          

	data () {
		return {
			fileName: "", //Excel文件
			fileDir: "", //Excel文件路径
		}
	},
	checkFile() {
      document.querySelector("#fileinput").click();
    },
    checkFileSure() {
      let fileObj = document.querySelector("#fileinput").files[0];
      let file = document.querySelector("#fileinput");
      if (fileObj) {
        this.fileName = fileObj.name;
        // 文件类型
        let fileType = fileObj.type;
        let fileSize = fileObj.size;

        // 文件大小
        if (
          !(
            fileType === "application/vnd.ms-excel" ||
            fileType ===
              "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
          )
        ) {
          this.msgError("上传文件仅支持 Excel 格式！");
          file.value = "";
          return false;
        } else if (fileSize / 1024 / 1024 > 50) {
          this.msgError("文件大小超过50M！");
          file.value = "";
          return false;
        }
        this.importDone();
      } else {
        this.$message.error("请选择导入的excel文档！");
        return false;
      }
    },
    //下载Excel模版
    downLoadModel() {
    
    	//getImportTempFile4Prize 为下载excel 模板接口
      getImportTempFile4Prize().then((res) => {
        window.location.href = `${this.$store.state.weShop.IMGHEAD}${res.URI}`;
      });
    },
    importDone() {
      if (this.fileName == null || this.fileName === "") {
        this.$message.error("请选择导入的excel文档！");
        return;
      }
      let fileObj = document.querySelector("#fileinput").files[0];
      console.log(fileObj.name);
      let file = document.querySelector("#fileinput");
      console.log(file);
      if (fileObj?.name) {
        let formData = new FormData();
        formData.append("file", fileObj);
        formData.append("upload_type", "02");
        let fileType = fileObj.type.split("/")[1];
        
        // uploadExcel 为后台上传Excel 接口
        uploadExcel(formData, fileType)
          .then((res) => {
            file.value = "";
            this.fileDir = res.PATH;
            this.form.PRIZE_NUM = res.NUM;
          })
          .catch(() => {
            file.value = "";
          })
          .then((res) => {});
        document.querySelector("#fileinput").value = "";
      } else {
        this.$message.error("请选择导入的excel文档！");
        document.querySelector("#fileinput").value = "";
        this.fileName = "";
        return false;
      }
    },
    

以上逻辑在后台接口，前端主要做的是一些简要的操作，需要上传Excel的话需要先上传到服务器才行。作为一个CV工程师相信上面代码对你有益的话就赶紧拿去使用吧。