前端 axios请求上传图片文件

### 使用 Axios 进行 API 请求 在前端项目中使用 Axios 发起 API 请求相对简单。以下是具体方法： #### 导入 Axios 并发起 GET 请求 对于简单的 GET 请求，可以按照如下方式操作[^1]: ```javascript import axios from 'axios'; axios.get('https://api.example.com/data') .then(response => { console.log('请求成功', response.data); }) .catch(error => { console.error('请求失败', error); }); ``` 这段代码展示了如何导入 `axios` 模块并调用其 `.get()` 方法来获取数据。 #### 安装 Axios 和基本配置 如果尚未安装 Axios，则需通过 npm 或 yarn 来安装它: ```bash npm install axios ``` 之后可以在项目的入口文件或其他合适位置设置一些全局默认参数，比如超时时间和基础 URL 等[^3]: ```javascript // 设置全局默认值 axios.defaults.timeout = 2000; axios.defaults.headers.common['Authorization'] = 'Bearer YOUR_ACCESS_TOKEN'; axios.defaults.baseURL = 'http://localhost:5000'; ``` 这样做的好处是可以减少每次请求时重复输入相同的信息。 #### 创建自定义实例 为了更好地管理和维护不同类型的请求，还可以基于特定配置创建新的 Axios 实例: ```javascript const customAxiosInstance = axios.create({ baseURL: 'https://api.customservice.com', headers: {'X-Custom-Header': 'foobar'} }); ``` 这允许为不同的服务或环境定制专属的行为模式而不影响其他部分的功能。 #### 处理 POST 请求及上传/下载文件 当涉及到发送表单数据或者处理文件传输时，POST 请求就显得尤为重要了。这里给出一个用于提交 JSON 数据的例子以及从服务器接收二进制流作为响应的情况下的解决方案[^4]: ```javascript // 提交JSON数据到API端点 customAxiosInstance.post('/submit-data', { key: "value" }, { responseType: 'json' }) .then((response) => { // 成功后的逻辑... }); // 下载文件 function downloadFile(url, params) { const config = { method: 'post', url, data: qs.stringify(params), responseType: 'blob' // 表明这是一个二进制文件而非纯文本 }; return axios(config).then(({data})=>{ let link=document.createElement('a'); link.href=window.URL.createObjectURL(new Blob([data])); link.download="filename.ext"; // 文件名可以根据实际情况调整 document.body.appendChild(link); link.click(); setTimeout(() => { window.URL.revokeObjectURL(link.href); // 清除临时链接对象 document.body.removeChild(link); }, 100); }).catch(err=>console.warn(`Error downloading file ${err}`)); } ``` 上述例子不仅涵盖了常规的数据交互场景，还特别针对文件下载提供了实用的技术方案。

### 如何在前端使用 Axios 取消 HTTP 请求 为了实现取消 HTTP 请求的功能，在创建 Axios 实例时可以利用 `CancelToken` 或者更推荐的方式是使用基于 AbortController 的方法来管理请求的生命周期。 当发起一个 PUT 请求用于上传文件分片时，可以通过如下方式集成取消功能： ```javascript import axios from 'axios'; // 创建一个新的AbortController实例 const controller = new AbortController(); const { signal } = controller; async function uniformChunkRequest() { try { const response = await axios.put( url, formData, { ...options, signal, // 将signal传递给Axios配置项 onUploadProgress(progressEvent) { let progress = (progressEvent.loaded / file.size) * 100; console.log(`当前进度 : ${Math.round(progress)}%`); } }); currentNumRequest++; return response; } catch (error) { if (axios.isCancel(error)) { console.log('Request canceled', error.message); } else { throw error; // 处理其他类型的错误 } } } ``` 如果想要中途停止这个特定的PUT请求，只需简单地调用控制器对象上的 abort 方法并提供可选的消息参数即可[^1]: ```javascript controller.abort('User manually stopped the upload'); ``` 通过这种方式可以在用户交互或其他逻辑条件下灵活控制HTTP请求的状态，从而提升用户体验和应用性能。