记一次导入导出功能的经历

 前言：

    记下这篇博客是因为做导入导出功能费了小萌很大的功夫，让小萌终于明白什么叫牵一发而动全身，本来前端技术就不好，刚开始的需求是导入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语言每过一段时间就更新一次是为什么呢，除了增加一些新的功能之外，还要修改之前遗留的问题，完美是理想，更好是追求，不冲突