el-upload使用http-request 方式上传,为什么on-success 也被调用了
时间: 2023-11-01 20:45:48 浏览: 46
el-upload 组件使用 http-request 方式上传时,通常会发送一个 HTTP 请求来上传文件。在请求完成后,无论上传成功或失败,都会触发 on-success 事件。
原因是在发送完请求后,组件会等待服务器的响应。当服务器响应成功时,即使文件上传成功,也会触发 on-success 事件。这是为了让开发者能够在文件上传成功后执行一些额外的操作或处理逻辑。
如果你只想在文件上传成功时触发 on-success 事件,可以在事件处理函数中判断服务器的响应状态码。只有当状态码符合预期时,才执行相应的逻辑。
请注意,在使用 http-request 方式上传时,on-success 事件的触发条件与文件是否上传成功或失败无关,而是取决于服务器的响应状态。
相关问题
el-upload使用http-request 采用axios 方式上传,为什么on-success 被调用了
如果你在使用 el-upload 组件时采用 axios 方式进行文件上传,并且在上传成功后触发了 on-success 事件,可能有以下几个可能的原因:
1. 请求成功状态码:在使用 axios 发送 HTTP 请求时,默认情况下,只有当请求返回的状态码为 2xx(例如 200)时,axios 才会认为请求成功。如果服务器返回的状态码符合成功条件,axios 会触发 Promise 的 resolve 回调,从而导致 on-success 事件被调用。
2. 组件配置:请确保你正确配置了 el-upload 组件的相关属性,包括 action(请求地址)、headers(请求头信息)以及其他可能的配置项。如果配置不正确,可能会导致请求失败或触发错误回调。
3. 服务器响应:确认服务器是否正确处理了上传文件的请求,并返回了适当的响应。如果服务器返回了预期的成功响应,axios 会将其视为请求成功,从而触发 on-success 事件。
建议你仔细检查以上几个方面,确保请求配置和服务器响应都正确无误。如果问题仍然存在,可以进一步检查网络请求日志和服务器端代码,以确定问题所在。
el-upload on-success不触发
el-upload的on-success方法不触发的原因可能是auto-upload属性设置为false,并且使用了http-request属性来进行上传。在这种情况下,需要在http-request属性中手动调用uploadSuccess方法来触发on-success方法。
具体的解决方法是,在submitUpload方法中,调用http请求的then方法中,手动调用uploadSuccess方法,如下所示:
```javascript
submitUpload() {
this.axios({
method: 'post',
url: 'http://localhost:8090/uploadFile',
data: this.fileData,
timeout: 4000
}).then((response) => {
this.uploadSuccess(response);
})
}
```
这样就能确保on-success方法被正确触发了。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)