如何使用axios从VueJS向ExpressJS API发送含文件的表单数据

问题根源 #

你之前直接传递普通JS对象时，axios会默认将请求头Content-Type设为application/json，这种格式仅支持传输序列化的文本数据，无法处理二进制文件流，因此文件数据会在传输过程中丢失。

前端改造步骤 #

提交请求时需要将所有表单数据封装到FormData对象中，同时指定正确的请求头：

// 表单提交逻辑处编写
const formData = new FormData()
// 遍历原有body对象的所有属性，全部写入FormData
Object.keys(this.body).forEach(key => {
  formData.append(key, this.body[key])
})

// 发起axios请求
axios.post('urlOfMyAPI', formData, {
  headers: {
    'Content-Type': 'multipart/form-data'
  }
}).then(response => this.rep = response.data)

后端Express改造步骤 #

Express默认的body-parser中间件无法解析multipart/form-data类型的请求，需要引入multer中间件处理文件上传：

1. 安装依赖
   npm install multer
2. 配置路由中间件

const multer = require('multer')
// 小文件可直接存在内存，大文件可配置dest参数指定本地存储路径
const upload = multer()

// 此处的single('file')对应前端FormData中文件的字段名，和你表单绑定的字段一致
router.post('/你的接口路径', upload.single('file'), exports.Create)

3. 调整接口逻辑
   上传的文件会存放在req.file属性中，普通字段仍保存在req.body中：

exports.Create = (req,res) => { 
  console.log(req.body.text); // 普通文本字段正常读取
  console.log(req.file.originalname); // 文件名等文件信息从req.file读取
  // 后续业务逻辑
}

常见注意事项 #

• 若需要上传多个文件，将路由配置中的upload.single('file')改为upload.array('files', 最大上传数量)，文件列表会存储在req.files中
• 不要对FormData对象做JSON序列化操作，会直接丢失二进制文件数据
• 如果使用v-file-input的多选模式，绑定值会是文件数组，遍历写入FormData时需要单独判断循环添加

内容的提问来源于stack exchange，提问作者Nevermore1803