axios 发送 formData

<think>我们使用axios发送formData时，需要注意设置请求头为'multipart/form-data'，并且正确构建FormData对象。 以下是一个完整的示例，展示如何使用axios发送FormData数据。 步骤： 1. 创建FormData对象，并添加需要发送的数据。 2. 使用axios的post方法（或其他方法）发送请求，并将FormData对象作为请求体。 3. 设置请求头，注意：当使用FormData时，通常浏览器会自动设置请求头（包括Content-Type为'multipart/form-data'和正确的boundary）。但是，在某些情况下（如需要自定义请求头）需要注意不要覆盖这个Content-Type。 注意：在大多数情况下，我们不需要手动设置Content-Type，因为浏览器会根据FormData对象自动设置。如果手动设置Content-Type，可能会破坏boundary的生成。 示例场景：上传用户头像（包含一个文件和一个用户ID字段）</think># 使用 Axios 发送 FormData 的完整指南 在 Web 开发中，使用 Axios 发送 FormData 是处理文件上传和表单提交的常见需求。以下是详细解决方案： ## 基本用法：发送 FormData ```javascript import axios from 'axios'; // 创建 FormData 对象 const formData = new FormData(); // 添加文本字段 formData.append('username', 'john_doe'); formData.append('email', '[email protected]'); // 添加文件 const fileInput = document.querySelector('input[type="file"]'); if (fileInput.files.length > 0) { formData.append('avatar', fileInput.files[0]); } // 发送请求 axios.post('https://api.example.com/users', formData, { headers: { // 注意：不要手动设置 Content-Type，浏览器会自动设置正确的 boundary 'Content-Type': 'multipart/form-data' } }) .then(response => { console.log('上传成功:', response.data); }) .catch(error => { console.error('上传失败:', error); }); ``` ## 完整示例：带进度条的文件上传 ```javascript import axios from 'axios'; import React, { useState } from 'react'; const FileUploadForm = () => { const [file, setFile] = useState(null); const [progress, setProgress] = useState(0); const [uploadStatus, setUploadStatus] = useState(''); const handleFileChange = (e) => { setFile(e.target.files[0]); }; const handleSubmit = async (e) => { e.preventDefault(); if (!file) { setUploadStatus('请选择文件'); return; } const formData = new FormData(); formData.append('file', file); formData.append('description', '用户上传的文件'); try { setUploadStatus('上传中...'); setProgress(0); const response = await axios.post('https://api.example.com/upload', formData, { headers: { 'Content-Type': 'multipart/form-data' }, onUploadProgress: (progressEvent) => { const percentCompleted = Math.round( (progressEvent.loaded * 100) / progressEvent.total ); setProgress(percentCompleted); } }); setUploadStatus(`上传成功: ${response.data.fileUrl}`); } catch (error) { console.error('上传失败:', error); setUploadStatus('上传失败: ' + (error.response?.data?.message || error.message)); } }; return ( <div> <form onSubmit={handleSubmit}> <input type="file" onChange={handleFileChange} /> <button type="submit">上传文件</button> </form> {progress > 0 && ( <div className="progress-bar"> <div className="progress" style={{ width: `${progress}%` }}></div> <span>{progress}%</span> </div> )} {uploadStatus && <p>{uploadStatus}</p>} </div> ); }; export default FileUploadForm; ``` ## 关键点解释 1. **FormData 对象**： - 用于构建表单数据 - 支持文本、文件和二进制数据 - 自动处理多部分表单数据 2. **正确设置 Content-Type**： - 不要手动设置 `Content-Type: multipart/form-data` - Axios 会自动检测 FormData 并设置正确的请求头 - 手动设置会覆盖自动生成的 boundary 导致错误 3. **上传进度监控**： - 使用 `onUploadProgress` 回调函数 - `progressEvent.loaded` 和 `progressEvent.total` 计算进度 4. **错误处理**： - 捕获 Axios 错误 - 访问服务器返回的错误信息 ## 高级用法：多文件上传和额外参数 ```javascript const uploadMultipleFiles = async (files, userId) => { const formData = new FormData(); // 添加多个文件 files.forEach((file, index) => { formData.append(`file_${index}`, file); }); // 添加额外参数 formData.append('userId', userId); formData.append('uploadTime', new Date().toISOString()); // 添加嵌套对象（需要序列化） formData.append('metadata', JSON.stringify({ device: 'mobile', location: 'New York' })); try { const response = await axios.post('https://api.example.com/uploads', formData, { // 设置超时时间（毫秒） timeout: 30000, // 添加认证信息 headers: { Authorization: `Bearer ${localStorage.getItem('token')}` } }); return response.data; } catch (error) { if (error.response) { // 服务器返回了错误响应 throw new Error(`服务器错误: ${error.response.status} - ${error.response.data.message}`); } else if (error.request) { // 请求已发出但没有响应 throw new Error('服务器无响应'); } else { // 其他错误 throw new Error('请求设置错误: ' + error.message); } } }; ``` ## 服务器端示例（Node.js + Express） ```javascript const express = require('express'); const multer = require('multer'); const app = express(); const port = 3000; // 配置 Multer 存储 const storage = multer.diskStorage({ destination: (req, file, cb) => { cb(null, 'uploads/'); }, filename: (req, file, cb) => { const uniqueSuffix = Date.now() + '-' + Math.round(Math.random() * 1E9); cb(null, file.fieldname + '-' + uniqueSuffix + '.' + file.originalname.split('.').pop()); } }); const upload = multer({ storage }); // 处理文件上传 app.post('/upload', upload.single('file'), (req, res) => { // req.file 包含文件信息 // req.body 包含其他表单字段 if (!req.file) { return res.status(400).json({ error: '未上传文件' }); } res.json({ message: '文件上传成功', file: req.file, formData: req.body }); }); // 处理多文件上传 app.post('/uploads', upload.array('files', 5), (req, res) => { // req.files 包含所有文件 res.json({ message: `${req.files.length} 个文件上传成功`, files: req.files, formData: req.body }); }); app.listen(port, () => { console.log(`服务器运行在 http://localhost:${port}`); }); ``` ## 常见问题及解决方案 ### 问题1：Content-Type 错误 **错误信息**：`Multipart: Boundary not found` **解决方案**：不要手动设置 `Content-Type` 头，让 Axios 自动处理 ```javascript // 错误做法 ❌ headers: { 'Content-Type': 'multipart/form-data' } // 正确做法 ✅ // 不设置 Content-Type 头 ``` ### 问题2：文件太大上传失败 **解决方案**： 1. 客户端分片上传 2. 服务器端增加限制 ```javascript // 客户端分片上传示例 const uploadLargeFile = async (file) => { const CHUNK_SIZE = 5 * 1024 * 1024; // 5MB const totalChunks = Math.ceil(file.size / CHUNK_SIZE); for (let chunkIndex = 0; chunkIndex < totalChunks; chunkIndex++) { const start = chunkIndex * CHUNK_SIZE; const end = Math.min(start + CHUNK_SIZE, file.size); const chunk = file.slice(start, end); const formData = new FormData(); formData.append('chunk', chunk); formData.append('chunkIndex', chunkIndex); formData.append('totalChunks', totalChunks); formData.append('fileName', file.name); formData.append('fileSize', file.size); await axios.post('/upload-chunk', formData); console.log(`上传进度: ${Math.round(((chunkIndex + 1) / totalChunks) * 100)}%`); } // 通知服务器合并文件 await axios.post('/merge-files', { fileName: file.name, totalChunks }); }; ``` ### 问题3：跨域请求问题 **解决方案**：配置 CORS ```javascript // 服务器端（Express） const cors = require('cors'); app.use(cors({ origin: 'https://your-client-domain.com', methods: ['POST', 'PUT'], allowedHeaders: ['Content-Type', 'Authorization'] })); ``` ### 问题4：认证问题 **解决方案**：添加认证头 ```javascript axios.post('/upload', formData, { headers: { Authorization: `Bearer ${getAuthToken()}` } }); ``` ## 最佳实践 1. **前端验证**： - 检查文件类型 - 限制文件大小 - 显示预览 ```javascript // 文件验证示例 const validateFile = (file) => { // 文件类型验证 const allowedTypes = ['image/jpeg', 'image/png', 'application/pdf']; if (!allowedTypes.includes(file.type)) { throw new Error('不支持的文件类型'); } // 文件大小验证（最大10MB） const maxSize = 10 * 1024 * 1024; if (file.size > maxSize) { throw new Error('文件大小超过10MB限制'); } return true; }; ``` 2. **取消上传**： ```javascript const CancelToken = axios.CancelToken; let cancel; // 开始上传 const startUpload = () => { const source = CancelToken.source(); cancel = source.cancel; axios.post('/upload', formData, { cancelToken: source.token }); }; // 取消上传 const cancelUpload = () => { if (cancel) { cancel('用户取消了上传'); } }; ``` 3. **重试机制**： ```javascript const uploadWithRetry = async (formData, retries = 3) => { for (let attempt = 1; attempt <= retries; attempt++) { try { return await axios.post('/upload', formData); } catch (error) { if (attempt === retries) throw error; console.log(`上传失败，第${attempt}次重试...`); await new Promise(resolve => setTimeout(resolve, 1000 * attempt)); } } }; ``` 4. **TypeScript 类型支持**： ```typescript interface UploadResponse { success: boolean; fileUrl: string; fileSize: number; } interface UploadParams { file: File; description: string; userId: string; } const uploadFile = async (params: UploadParams): Promise<UploadResponse> => { const formData = new FormData(); formData.append('file', params.file); formData.append('description', params.description); formData.append('userId', params.userId); const response = await axios.post<UploadResponse>('/api/upload', formData); return response.data; }; ```