欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vue實(shí)現(xiàn)Excel本地下載及上傳的方法詳解

 更新時(shí)間:2022年07月14日 09:32:03   作者:jimyking  
相信大家在項(xiàng)目中經(jīng)常會(huì)遇到一些上傳下載文件的相關(guān)功能。這篇文章將為大家介紹一下Vue實(shí)現(xiàn)Excel本地下載及上傳的示例代碼,需要的可以參考一下

相信大家在項(xiàng)目中經(jīng)常會(huì)遇到一些上傳下載文件的相關(guān)功能,本文就Excel的相關(guān)功能進(jìn)行簡述:

咱直接看代碼:

          <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. 請(qǐng)按照Excel表格模板內(nèi)字段格式進(jìn)行上傳
              </div>
              <div class="import-notice">2. 導(dǎo)入表格數(shù)量控制在10000條以內(nèi)</div>
              <div class="import-notice">
                3. Excel表格模板點(diǎn)擊下載:<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("請(qǐng)選擇導(dǎo)入的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("請(qǐng)選擇導(dǎo)入的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 為后臺(tái)上傳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("請(qǐng)選擇導(dǎo)入的excel文檔!");
        document.querySelector("#fileinput").value = "";
        this.fileName = "";
        return false;
      }
    },

以上邏輯在后臺(tái)接口,前端主要做的是一些簡要的操作,需要上傳Excel的話需要先上傳到服務(wù)器才行。

到此這篇關(guān)于Vue實(shí)現(xiàn)Excel本地下載及上傳的方法詳解的文章就介紹到這了,更多相關(guān)Vue Excel下載上傳內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

  • vue中父子組件注意事項(xiàng),傳值及slot應(yīng)用技巧

    vue中父子組件注意事項(xiàng),傳值及slot應(yīng)用技巧

    這篇文章主要介紹了vue中父子組件注意事項(xiàng),傳值及slot應(yīng)用技巧,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2018-05-05
  • vue-cli 引入、配置axios的方法

    vue-cli 引入、配置axios的方法

    這篇文章主要介紹了vue-cli 引入axios的方法,文中還給大家提到了vue-cli 配置axios的方法,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下
    2018-05-05
  • Vue使用screenfull實(shí)現(xiàn)全屏效果

    Vue使用screenfull實(shí)現(xiàn)全屏效果

    這篇文章主要為大家詳細(xì)介紹了Vue使用screenfull實(shí)現(xiàn)全屏,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2020-09-09
  • vue循環(huán)中點(diǎn)擊選中再點(diǎn)擊取消(單選)的實(shí)現(xiàn)

    vue循環(huán)中點(diǎn)擊選中再點(diǎn)擊取消(單選)的實(shí)現(xiàn)

    這篇文章主要介紹了vue循環(huán)中點(diǎn)擊選中再點(diǎn)擊取消(單選)的實(shí)現(xiàn),具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
    2020-09-09
  • Vue3 + CSS實(shí)現(xiàn)一個(gè)噴火龍動(dòng)畫效果

    Vue3 + CSS實(shí)現(xiàn)一個(gè)噴火龍動(dòng)畫效果

    不知不覺中,2023年已然逝去了,龍年到了,所以本文小編使用Vue3 + CSS實(shí)現(xiàn)一個(gè)噴火龍的動(dòng)畫效果,文中有相關(guān)的代碼示例供大家參考,具有一定的參考價(jià)值,感興趣的同學(xué)可以自己動(dòng)手嘗試一下
    2024-02-02
  • vite+vue3代碼風(fēng)格校驗(yàn)及格式化方式

    vite+vue3代碼風(fēng)格校驗(yàn)及格式化方式

    這篇文章主要介紹了vite+vue3代碼風(fēng)格校驗(yàn)及格式化方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2024-03-03
  • vue3項(xiàng)目中使用tinymce的方法

    vue3項(xiàng)目中使用tinymce的方法

    這篇文章主要介紹了vue3使用tinymce的方法,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2023-04-04
  • vue+iview使用樹形控件的具體使用

    vue+iview使用樹形控件的具體使用

    這篇文章主要介紹了vue+iview使用樹形控件的具體使用,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2020-11-11
  • VUE項(xiàng)目去除input 框值所有空格的操作方法

    VUE項(xiàng)目去除input 框值所有空格的操作方法

    這篇文章主要介紹了VUE項(xiàng)目去除input 框值所有空格的操作方法,主要包括去除空格的方法、正則和element ui寫法,本文給大家講解的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2022-10-10
  • 使用Vue-cli 3.0搭建Vue項(xiàng)目的方法

    使用Vue-cli 3.0搭建Vue項(xiàng)目的方法

    這篇文章主要介紹了使用Vue-cli 3.0搭建Vue項(xiàng)目的方法,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2018-06-06

最新評(píng)論