### Vue3 中实现 FormData 文件上传 在 Vue3 中，可以通过 Axios 和 `FormData` 对象完成文件上传的功能。以下是详细的说明以及代码示例。 #### 创建 FormData 并设置字段 首先，在前端部分需要创建一个 `FormData` 实例，并通过其 `append()` 方法添加键值对。这些键值可以是普通的字符串或者二进制文件对象。例如： ```javascript const formData = new FormData(); formData.append('name', this.name); // 添加普通文本字段 formData.append('file', this.file, this.file.name); // 添加文件字段及其自定义名称 ``` 此段代码展示了如何将表单中的数据封装成 `FormData` 的形式[^1]。 #### 配置 Axios 请求头 为了确保服务器能够正确解析 `multipart/form-data` 类型的数据，需调整 Axios 的请求头配置如下所示： ```javascript axios.post('/api/upload', formData, { headers: { 'Content-Type': 'multipart/form-data' } }).then(response => { console.log('Upload successful:', response.data); }).catch(error => { console.error('Error during upload:', error); }); ``` 这里设置了 `'Content-Type'` 为 `'multipart/form-data'`，这是传输文件所必需的内容类型。 #### 后端接收逻辑 (Node.js + Multer 示例) 如果后端采用 Node.js，则可借助 multer 来处理 multipart 数据流。下面是一个简单的例子展示如何配置 multer 存储路径及命名规则： ```javascript const express = require('express'); const multer = require('multer'); // 设置存储引擎 const storage = multer.diskStorage({ destination(req, file, cb) { cb(null, './uploads/'); }, filename(req, file, cb) { cb(null, Date.now() + '-' + file.originalname); } }); const upload = multer({ storage }); app.post('/api/upload', upload.single('file'), (req, res) => { try { const filePath = req.file.path; res.status(200).json({ message: 'File uploaded successfully!', path: filePath }); } catch (err) { res.status(500).send(err.message); } }); ``` 这段脚本描述了如何利用 Express 框架配合 multer 插件来捕获来自客户端提交过来的文件信息[^2]。 #### 大文件分片上传支持 对于超大尺寸的文件来说，一次性全部加载至内存可能会造成性能瓶颈甚至崩溃风险。因此推荐采取分块策略逐步递交各片段直至整个文档完全送达为止。具体流程包括但不限于以下几个环节：初始化会话、逐帧传递数据包、监控进度百分比更新状态通知等等[^4]。 ```javascript function createChunk(file, size = 1 * 1024 * 1024 /* 默认每块大小 */) { let chunks = []; for(let i=0;i<file.size;i+=size){ chunks.push(file.slice(i,i+size)); } return chunks; } let chunkedFiles = createChunk(this.largeFile); chunkedFiles.forEach((chunk,index)=>{ let fd=new FormData(); fd.append("index", index.toString()); fd.append("totalChunks", chunkedFiles.length.toString()); fd.append("filename", this.largeFile.name); fd.append("chunkData", chunk); axios.post("/upload/chunk",fd,{ onUploadProgress(progressEvent){ var percentCompleted=Math.round((progressEvent.loaded*100)/progressEvent.total); console.log(`Uploaded ${percentCompleted}%`); } }).then(res=>console.log(res)).catch(err=>console.error(err)) }) ``` 以上代码实现了基于分片机制的大文件上传方案。 ---