标签：Vue fileObj Excel let file fileinput document 上传

相信大家在项目中经常会遇到一些上传下载文件的相关功能，本文就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的话需要先上传到服务器才行。作为一个CV工程师相信上面代码对你有益的话就赶紧拿去使用吧。

标签：Vue,fileObj,Excel,let,file,fileinput,document,上传
来源： https://www.cnblogs.com/jimyking/p/16476388.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。