vue上传文件 2分钟超时 浏览器重发机制
vue上传文件 2分钟超时 浏览器重发机制 Required request part ‘file‘ is not present
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部署的前端,可能需要考虑下,但大概是同上?
或者有厉害的人,给我说一下我理解上的误区?
更多推荐
所有评论(0)