使用axios实现上传图片进度条功能

Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。 Features 从浏览器中创建 XMLHttpRequests 从 node.js 创建 http 请求 支持 Promise API 拦截请求和响应 转换请求数据和响应数据 取消请求 自动转换 JSON 数据 客户端支持防御 XSRF 下面给大家介绍使用axios实现上传图片进度条功能，具体内容介绍如下所示： 　在最近做的项目中，一个手机页面最多要上传几十张图片，虽然对照片做了压缩处理，不过最后还是很大，如果网卡的话，上传的时间很差，如果一直在loading的话，用户都不知道什 在现代Web应用中，用户经常会遇到需要上传大量文件的情况，特别是图片。为了提供更好的用户体验，显示上传进度条和百分比是非常必要的。`axios`是一个强大的HTTP库，它支持Promise API和丰富的特性，使得在浏览器和Node.js环境中进行HTTP请求变得更加简单。在本文中，我们将深入探讨如何使用`axios`来实现上传图片时的进度条功能。 `axios`提供了`onUploadProgress`钩子，允许我们在上传过程中监听进度事件。这个函数接收一个`progressEvent`对象，该对象包含了关于上传进度的关键信息。例如，`lengthComputable`属性表示是否能够计算出总上传大小，如果为`true`，则可以通过`progressEvent.total`获取总大小，`progressEvent.loaded`获取已上传的大小。 在Vue.js项目中，我们通常会将数据请求集中管理，以方便维护。我们可以创建一个名为`uploadPhoto`的全局方法，它接受上传参数、一个进度回调函数和一个结果回调函数。在`axios`的配置中，我们调用`onUploadProgress`并传递给进度回调： ```javascript uploadPhoto(payload, callback1, callback2) { axios({ url: BASE_URL + '/handler/material/upload', method: 'post', onUploadProgress: function(progressEvent) { if (progressEvent.lengthComputable) { callback1(progressEvent); } }, data: payload }).then(res => { callback2(res.data); }).catch(error => { console.log(error); }); } ``` 在Vue组件中，我们可以使用`<mt-progress>`这样的组件（例如Mint-UI的Progress组件）来显示进度条。在`data`中定义一个`precent`变量来存储当前的进度，并将其绑定到`<mt-progress>`的`value`属性上。同时，利用`$nextTick`确保DOM更新后，我们更新`precent`的值： ```javascript <mt-progress :value="precent" :bar-height="10"> <div slot="end">{{ Math.ceil(precent) }}%</div> </mt-progress> // 在methods中 API.uploadPhoto(fd, (res) => { let loaded = res.loaded; let total = res.total; this.$nextTick(() => { this.precent = (loaded / total) * 100; }); }, (res) => { if (res.code === '200') { MessageBox.alert('图片上传成功').then(action => { console.log('ok'); }); } }); ``` 通过这种方式，我们可以实时地更新进度条，向用户展示上传进度。同时，当上传成功或失败时，我们可以调用结果回调函数来处理后续逻辑，比如显示提示信息。 利用`axios`的`onUploadProgress`功能，结合Vue.js和组件库如Mint-UI，我们可以轻松地实现在上传图片时显示进度条的功能。这不仅提高了用户体验，也使得我们的应用更加健壮和友好。记得在实际项目中根据自己的需求调整样式和细节，以达到最佳的视觉效果和交互体验。在开发过程中，不断优化和迭代，始终关注用户体验，是提升应用程序质量的关键。