Lorsque vous utilisez axios avec Vue, vous pouvez l'encapsuler dans un fichier séparé pour le réutiliser dans toute votre application et y ajouter le chargement de tranches et l'affichage de la progression. Voici une implémentation possible :
1. Installez axios et le plug-in de barre de progression nprogress :
npm install axios nprogress --save
2. Créez un nouveau fichier axios.js dans le dossier src/utils, puis écrivez-y le code suivant :
import axios from 'axios';
import NProgress from 'nprogress';
import 'nprogress/nprogress.css';
axios.defaults.baseURL = 'https://your-api-domain.com/api';
axios.defaults.timeout = 10000; // 设置超时时间
// 请求拦截器
axios.interceptors.request.use((config) => {
NProgress.start(); // 进度条开始
return config;
}, (error) => {
NProgress.done(); // 进度条结束
return Promise.reject(error);
});
// 响应拦截器
axios.interceptors.response.use((response) => {
NProgress.done(); // 进度条结束
return response;
}, (error) => {
NProgress.done(); // 进度条结束
return Promise.reject(error);
});
// 封装axios方法
export function request(method, url, data, onUploadProgress) {
return axios({
method,
url,
data,
onUploadProgress, // 上传进度回调函数
// 以下是切片加载所需的配置
maxContentLength: 1024 * 1024 * 10, // 最大数据量
maxBodyLength: 1024 * 1024 * 10, // 最大请求长度
timeout: 0, // 无限等待响应
});
}
3. Utilisez cet axios encapsulé dans votre composant Vue :
import {
request } from '@/utils/axios';
export default {
methods: {
// 上传文件
async uploadFile(file) {
const formData = new FormData();
formData.append('file', file);
await request('post', '/upload', formData, (progressEvent) => {
const percentCompleted = Math.round((progressEvent.loaded * 100) / progressEvent.total);
console.log(percentCompleted); // 打印上传进度
});
console.log('上传完成');
},
},
};
Dans cet exemple, nous avons ajouté la fonction de rappel onUploadProgress dans la fonction de requête pour suivre la progression du téléchargement du fichier. Vous pouvez modifier vous-même l'implémentation de cette fonction si nécessaire.
De plus, nous avons ajouté le plugin NProgress dans l'intercepteur axios pour afficher une barre de progression entre chaque requête et réponse. Cela offrira aux utilisateurs une meilleure expérience utilisateur.