Vue如何实现Excel本地下载及上传的方法详解

冬天,洁白的雪花慢慢地飘落下来,落到这里,飘到那里,我们仿佛置身于童话般的雪白世界。在苍茫的大海上,狂风卷集着乌云。在乌云和大海描写大海的散文之间,海燕像黑色的闪电,在高傲的飞翔。

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

咱直接看代码:

          <div class="import-main-content">
            <div class="import-main-button" @click="checkFile">
              <div class="import-center" style="cursor: hand">
                <div>+</div>
                <div>上传Excel文件</div>
              </div>
            </div>
            <div style="margin: 5px auto; width: 350px">
              <div class="image-multiple-area" v-if="fileName">
                <span>{{ fileName }}</span>
                <img
                  @click="removes"
                  style="position: absolute; top: -1px; right: -1px"
                  src="@/assets/icons/tag-remove-icon.png"
                  class="remove-excel"
                  alt=""
                />
              </div>
              <div v-else>尚未选择文件!</div>
              <div class="import-notice">注意:</div>
              <div class="import-notice">
                1. 请按照Excel表格模板内字段格式进行上传
              </div>
              <div class="import-notice">2. 导入表格数量控制在10000条以内</div>
              <div class="import-notice">
                3. Excel表格模板点击下载:<span
                  style="color: #277cf0"
                  @click="downLoadModel"
                  >Excel表格模板</span
                >
              </div>
            </div>
            <input
              type="file"
              id="fileinput"
              style="display: none"
              @change="checkFileSure"
              accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel"
            />
          </div>
	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的话需要先上传到服务器才行。

到此这篇关于Vue实现Excel本地下载及上传的方法详解的文章就介绍到这了,更多相关Vue Excel下载上传内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持!

您可能有感兴趣的文章
vue如何实现列表固定列滚动

vue如何实现移动端拖拽悬浮按钮

vue如何实现伸缩菜单功能

Vue如何实现可复用轮播组件的方法

vue项目中canvas如何实现截图功能