vue上传文件 2分钟超时 浏览器重发机制

el-upload自带的上传机制不太好使，一会报拦截，一会报 “Required request part ‘file‘ is not present”，最后用组件的http-request 覆盖默认的上传机制，给他添加了配置等等。

然后呢，当上传在两分钟以内，就是正常的，报错异常时都能提示，但是超过两分钟，就不行了。前端上一个请求自动断开连接，并发起了一个新的请求进来，后台前一个还在跑，后一个就进来了，而当后台跑完前一个或遇到异常需要返回时发现连接已经无了，就IO异常了。 

前端就一直被loading屏蔽，也不知道上传是否成功。

【一开始以为是后端超时问题，后来以为是遮罩自动关闭，再后来发现是浏览器重试机制，然后怀疑是超时，但改了超时包括如下代码里配置了timeout，2分钟内的配置是生效的，超过2分钟的美就产生新问题，一直没法定位到问题。 后来百度看了很久，以及用postman，确定是前端timeout的问题 】

后来的解决办法是，把我们自己框架里关于请求的配置都找到然后加timeout。在一个配置跨域代理的地方，尝试添加了timeout，问题解决。 总结下来就是，作为一个后端，才学了2月vue，属实是对我们公司自己的前端框架不熟悉，对vue也不熟悉导致的。 我找到了一个 request的工具类，它提供了我们几乎全部接口的调用，封装了get  post等。也有配置超时的地方。 可惜配置不生效。

很正常，我是直接使用的，没走那些，【return axios.post(url, formData,config){ }】，如果我前端厉害些，早就应该去找其他的配置项的。 

注意最后那行，我就吃亏在这，重启前端太麻烦，我懒得重启，白浪费了一小时。。。

下附代码，屏蔽了重要信息，应该是没法直接使用的，仅供参考。

          <el-upload
            v-if="writeable"
            class="upload-demo"
            :action="url"
            :limit="1"
            name = "file"
            :http-request="checkedFile"
            :headers="{
                        'token': token,
                        'Content-Type': 'multipart/form-data',
                        }"
            with-credentials
            :show-file-list = "false"
            :file-list="fileList">
            <el-button size="small" slot="trigger" type="primary">导入</el-button>
            <el-button type="primary" size="small" style="margin-left:10px;"  @click="downloadTemplate( itemData )">下载</el-button>
          </el-upload>




checkedFile( obj ) {
      let url = this.url + this.id;
      const formData = new FormData();
      formData.append( "file" , obj.file );//file 和 后端字段要保持一致
      const config = {
        headers: {
          [getTokenName()]: getToken(),
        },
        timeout: 600000 //这里2分钟内的配置是生效的，超过了就不行。。
      };

      const loading = this.$loading({
        lock: true,
        text: '导入中，若数据量过大，则时间较长，在此期间请勿操作，请等待......',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      }); 

     return axios.post(url, formData,config)
        .then((rs) => {
          if (rs.status ===200){
            if ( rs.data.code===0 ){
              this.$message({
                type: "success",
                message: "操作成功",
              });
            }else {
              this.$message({
                type: "warning",
                message: rs.data.msg,
              });
            }
          }else {
            this.$message({
              type: "warning",
              message: rs,
            });
          }
        
          this.getList();
          loading.close();
        })
        .catch( (rs) => {
          loading.close();
          this.getList();
          this.$message({
            type: "error",
            message:  rs,
          });
        });
    },


}

最后说一下，Required request part ‘file‘ is not present，大概率是你没写对。要注意前后端都一致。 不知道直接用element-ui的上传组件为啥老是这个问题，但postman可以。所以我重写了上传请求。

前端：

<el-upload name = "file"> </el-upload>   

后端：

@RequestParam(name = "file") MultipartFile file

网上说修改后端springboot超时时间，没必要。 

如果是nginx部署的前端，可能需要考虑下，但大概是同上？

或者有厉害的人，给我说一下我理解上的误区？