記一次導入導出功能的經歷

 前言：

    記下這篇博客是因爲做導入導出功能費了小萌很大的功夫，讓小萌終於明白什麼叫牽一髮而動全身，本來前端技術就不好，剛開始的需求是導入Excel文件後臺那邊去解析就可以了，然後點擊導出按鈕是下載一個更新的文件，這樣的需求蠻簡單的，很快就做好了，接口也調試完畢。但是後臺寫接口人員硬是把需求改成是導入Excel文件後立即把更新過後的文檔下載下來，然後點擊導出按鈕是下載一個更新的文件，這樣一改小萌寫的代碼就有問題了，本來用的是iView裏面Upload上傳文件，很簡單的，但是修改了需求就不一樣了，下載文件需要我們自己寫返回格式，但是Upload這個組件是沒有這個功能的
   
 

<Upload
        v-ref:upload
        :show-upload-list="false"
        :on-success="handleSuccess" //上傳成功在這裏返回上傳成功之後的網絡數據
        :format="['xls','xlsx']"
        :on-format-error="handleFormatError"//上傳格式失敗
        :on-exceeded-size="handleMaxSize"
        :before-upload="handleBeforeUpload" //上傳之前需要做的操作---比如判讀什麼的
        type="drag"
        action="需要上傳的地址"
        style="display: inline-block;width:58px;">
        <div style="width: 58px;height:58px;line-height: 58px;">
            <Icon type="camera" size="20"></Icon>
        </div>
    </Upload>

//沒有可以設置數據返回格式的地方，因此只能改變方案

 修改歷程

 --------原諒小萌前端技術不好，大腦不能立即改變好幾種方案--------

1.   第一次失敗：使用最原始的標籤input做上傳，無法進行上傳，原因前端的網絡請求是封裝好的，做個過濾處理，不知道什麼原因一直上傳不上去
2.   第二次小成功：所以小萌只能自己研究一下axios網絡請求框架，研究之後增加headers: { "Content-Type":    "multipart/form-data" },之後，使用axios的post請求終於上傳上去了
3.  第三次失敗：就是下載文件的配置有誤，"Content-Disposition": "application/octet-stream",    //下載文件二進制流 responseType: "blob"    //下載文件格式必須有，只配置這2個，小萌搜索了很多資料都是這麼寫的，下載下來的是亂碼
4.    第四次成功了：無意中type: "text/javascript",  //返回格式必須有把這個也放上去了，竟然成功了。！！！！！！！！！！！！
5. 下面是最後的正確代碼

 

<div class="import">
        <Button class="import-btn" type="primary" icon="icon">導入Excel</Button>
        <input
          @change="fileExcel"
          type="file"
          name="file"
          ref="uploadExcel"
          class="upload-input"
        />
    </div>
  //fileExcel上傳之後代碼：
    fileExcel(event) {
      let file = event.target.files[0];
      let fileName = file.name;
      console.log(event);

      if (fileName.indexOf("xlsx") != -1 || fileName.indexOf("xls") != -1) {
        let param = new FormData(); //創建form對象
        param.append("file", file, file.name); //通過append向form對象添加數據
        let config = {
          headers: { "Content-Type": "multipart/form-data" },
          type: "text/javascript",  //返回格式必須有
          "Content-Disposition": "application/octet-stream", //下載文件二進制流
          responseType: "blob" //下載文件格式必須有
        }; //添加請求頭

        let urls = "接口地址";
        axios.post(urls, param, config).then(response => {
          console.log(response.data);

          var blob = new Blob([response.data], {
            type:
              "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8" //類型
          });
          var url = window.URL.createObjectURL(blob);
          var aLink = document.createElement("a");
          aLink.style.display = "none";
          aLink.href = url;
          aLink.setAttribute("download", "名稱.xls");
          document.body.appendChild(aLink);
          aLink.click();
          document.body.removeChild(aLink); //下載完成移除元素
          window.URL.revokeObjectURL(url); //釋放掉blob對象

          this.$refs.uploadExcel.value = ""; //把之前導入的清空
        });
      } else {
      }
    }

 總結：
     這篇博客主要不是寫技術的，是記住這件事情，改需求的時候一定要謹慎，不能擅自修改，牽一髮而動全身，因爲這次小小的改動，導致用戶無法順利的使用，影響很大， 因此用戶至上，即使體驗不是很好，但是一定比沒有強的多，不能追求完美，更本就沒有完美，只能追求更好，比如java語言每過一段時間就更新一次是爲什麼呢，除了增加一些新的功能之外，還要修改之前遺留的問題，完美是理想，更好是追求，不衝突