### Vue2 中使用 FormData 实现文件上传 在 Vue2 中，`FormData` 是一种常见的用于处理文件上传的方式。它允许开发者轻松构建表单数据并通过 `axios` 将其提交给服务器[^1]。 以下是完整的实现方法： #### 创建 FormData 对象 首先，在组件中定义一个函数来创建 `FormData` 对象，并将文件附加到该对象上。通常情况下，这会涉及用户通过 `<input type="file">` 选择文件[^4]。 ```html <template> <div> <input type="file" @change="handleFileChange" /> <button @click="uploadFile">上传</button> </div> </template> <script> import axios from 'axios'; export default { data() { return { file: null, }; }, methods: { handleFileChange(event) { this.file = event.target.files[0]; // 获取选中的文件 }, uploadFile() { const formData = new FormData(); // 初始化 FormData 对象 formData.append('file', this.file); // 添加文件到 FormData 对象中 axios.post('/api/upload', formData, { // 使用 Axios 发送 POST 请求 headers: { 'Content-Type': 'multipart/form-data' // 设置 Content-Type } }) .then(response => { console.log('文件上传成功:', response.data); }) .catch(error => { console.error('文件上传失败:', error); }); } } }; </script> ``` #### 支持多文件上传 如果需要支持多文件上传，则可以在 `append()` 方法中多次调用或将整个文件数组一次性添加至 `FormData`[^2]。 ```javascript methods: { handleMultiFilesChange(event) { this.files = Array.from(event.target.files); // 转换为数组形式 }, uploadMultipleFiles() { const formData = new FormData(); this.files.forEach((file, index) => { formData.append(`files[${index}]`, file); // 动态命名 key }); axios.post('/api/multi-upload', formData, { headers: { 'Content-Type': 'multipart/form-data' } }) .then(response => { console.log('多文件上传成功:', response.data); }) .catch(error => { console.error('多文件上传失败:', error); }); } } ``` #### 展示上传进度 为了提升用户体验，可以利用 `axios` 的 `onUploadProgress` 参数实时监控上传进度。 ```javascript axios.post('/api/upload', formData, { headers: { 'Content-Type': 'multipart/form-data', }, onUploadProgress(progressEvent) { const percentCompleted = Math.round( (progressEvent.loaded * 100) / progressEvent.total ); console.log('当前上传进度:', percentCompleted + '%'); } }) .then(response => { console.log('文件上传完成:', response.data); }); ``` #### 大文件分片上传 对于大文件上传，可采用分片技术减少内存占用并提高稳定性。具体逻辑包括初始化、切片传输以及合并等阶段[^3]。 ```javascript async function uploadLargeFile(file) { const chunkSize = 1024 * 1024; // 定义每片大小为 1MB let chunks = []; for (let i = 0; i < file.size; i += chunkSize) { const end = Math.min(i + chunkSize, file.size); chunks.push(file.slice(i, end)); // 切割文件成片段 } const formDataList = chunks.map(chunk => { const fd = new FormData(); fd.append('chunk', chunk); return fd; }); await Promise.all(formDataList.map(fd => axios.post('/api/chunk-upload', fd, { headers: { 'Content-Type': 'multipart/form-data' } }) )); } // 调用此函数即可执行大文件分片上传 ``` ---