axios 使用 onDownloadProgress 时,progressEvent.total为0,怎么回事呢
时间: 2024-06-07 14:07:01 浏览: 143
通常情况下,当我们使用 Axios 发送请求时,服务器会返回一个响应头,其中包含了响应数据的长度信息。如果服务器没有设置这个响应头,那么 Axios 就无法获取到响应数据的长度,也就无法计算进度条的长度。
所以,如果你在使用 `onDownloadProgress` 时发现 `progressEvent.total` 为 0,很有可能是服务器没有正确设置响应头导致的。你可以尝试检查一下服务器是否设置了正确的响应头,或者尝试使用其他工具(比如浏览器的开发者工具)来查看响应头信息,看是否有 `Content-Length` 字段。
如果确实是服务器没有设置正确的响应头导致的,你可以考虑使用其他方式来实现进度条,比如定时查询下载进度并更新进度条。
相关问题
vue3如何使用axios获取文件下载速度
您可以采用axios的onDownloadProgress属性来获取文件下载的进度和速度信息。具体使用方法可以参考以下代码:
```
axios({
method: 'get',
url: 'your_download_url',
responseType: 'blob', // 以流的方式接收响应数据
onDownloadProgress: (progressEvent) => {
console.log('下载进度:' + progressEvent.loaded / progressEvent.total);
console.log('下载速度:' + progressEvent.loaded / (progressEvent.elapsedTime / 1000) / 1024 / 1024 + 'MB/s');
}
}).then(res => {
// 文件下载成功后的处理
}).catch(error => {
// 文件下载失败后的处理
})
```
请注意,在使用axios下载文件时,需设置responseType为‘blob’,并使用.then()来处理响应的数据。
axios 用async await 来活去接口的话怎么调用onDownloadProgress这个属性呢
使用 `async/await` 来发送 Axios 请求时,可以通过在 `config` 对象中设置 `onDownloadProgress` 属性来获取下载进度。例如:
```javascript
async function fetchData() {
try {
const response = await axios({
method: 'get',
url: '/data',
responseType: 'blob',
onDownloadProgress: function(progressEvent) {
// 获取下载进度
const percentCompleted = Math.round((progressEvent.loaded * 100) / progressEvent.total);
console.log(percentCompleted);
}
});
// 下载完成后的操作
} catch (error) {
// 错误处理
}
}
```
同样的,获取上传进度的方式也类似,在 `config` 对象中设置 `onUploadProgress` 属性即可。
相关推荐
![rar](https://img-home.csdnimg.cn/images/20210720083606.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)