ajax上传和下载文件

jQuery本身支持上传文件，但是不支持下载文件，这里要用到的组件是axios。

<form class="form-horizontal" method="post" role="form" id="fileForm">
   <div class="form-group">
      <div class="col-lg-4 col-md-4 col-sm-12 seach_col"></div>
      <div class="col-lg-4 col-md-4 col-sm-12 seach_col">
         <div class="input-group">
            <span class="input-group-addon">字段1</span>
            <input type="text" class="form-control" name="column" placeholder="请输入内容">
         </div>
      </div>
   </div>
   <div class="form-group">
      <div class="col-lg-4 col-md-4 col-sm-12 seach_col"></div>
      <div class="col-lg-4 col-md-4 col-sm-12 seach_col">
         <div class="input-group">
            <span class="input-group-addon">文件</span>
            <input type="file" class="form-control" name="filePath" placeholder="请选择文件">
         </div>
      </div>
   </div>
   <div class="form-group">
      <div class="col-lg-4 col-md-4 col-sm-12 seach_col"></div>
      <div class="col-lg-4 col-md-4 col-sm-12 seach_col">
         <button type="button" class="btn blue  btn-sm" onclick="submitForm()">提交</button>
      </div>
   </div>
</form>

<!-- 引入axios组件 -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

/**
 * 提交表单
 * 如果需要下载文件，需要加上responseType: 'blob'
 * 这个例子，支持上传文件的同时下载文件，上传时有上传进度，下载时后台需要返回一个文件流
 */
function submitForm() {
       var filePath = $("#fileForm input[name='filePath']").val();
       var fileName = filePath.substring(filePath.lastIndexOf("\\") + 1);
       //后缀名
       var suf = fileName.substring(fileName.lastIndexOf(".") + 1);
       //新文件名
       var newName = fileName.substring(0, fileName.lastIndexOf(".") + 1) + commons.getFormatDateTime(new Date(), null, true) + "." + suf;
       var formData = new FormData(document.getElementById("fileForm"));
       axios({
           method: 'post',
      	   //文件下载，后台返回文件流
           responseType: 'blob',
           url: "请求地址",
           data: formData,
           headers: {
               //文件上传
               "Content-Type": "multipart/form-data"
           },
           onUploadProgress: function (e) { //原生获取上传进度的事件
               if (!e.lengthComputable) {
                   console.log("不支持");
                   return;
               }

               //计算进度
               var percent = (e.loaded / e.total * 100).toFixed(0);
               console.log("上传进度：" + percent + "%");

               if(parseInt(percent) == 100) {
                   console.log("上传完成");
               }
           },
       }).then(response => {
          //动态创建一个a标签
          let link  = document.createElement("a");
          link.href = window.URL.createObjectURL(new Blob([response.data], {type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8"}));
          link.target = "_blank";
          link.download = newName;
          document.body.appendChild(link);
          //点击a标签
          link.click();
          //最后移除a标签
          document.body.removeChild(link);
       });
   }