Vue.js表单如何处理图片上传？提交Express接口时photo为空报500错误

你遇到的问题本质是两个链路的规则不匹配，和代码业务逻辑无关，全是文件上传场景的常见踩坑点：

• 文件输入框绑定逻辑错误，导致formdata.photo始终为初始值null，根本没读取到用户选中的图片
• 请求传输格式不匹配：后端用multer处理文件上传时，只识别multipart/form-data格式的请求体，直接传JSON格式的普通对象，后端完全解析不到文件内容，触发req.file为undefined的空引用报错，最终返回500

1. 修复文件选择的赋值逻辑 #

普通文本输入框可以用v-model双向绑定，但文件选择框受浏览器安全策略限制，*不能直接用v-model/v-bind绑定File对象，必须通过change事件读取DOM节点上的文件：

<!-- 替换原错误的v-bind绑定逻辑 -->
<input
  class="form-control-file"
  type="file"
  accept="image/*"
  @change="handlePhotoChange"
/>

在组件的methods中新增对应事件处理方法：

handlePhotoChange(e) {
  // 读取用户选中的第一个图片文件，存入formdata
  this.formdata.photo = e.target.files[0]
}

2. 提交时构造标准FormData #

不要直接把普通的formdata对象传给接口，手动构造符合文件上传规范的FormData实例，所有字段名和后端要求的完全对齐：

createPost() {
  const formData = new FormData()
  // 依次拼接所有文本字段
  formData.append('title', this.formdata.title)
  formData.append('body', this.formdata.body)
  formData.append('description', this.formdata.description)
  formData.append('snippet', this.formdata.snippet)
  // 文件字段名必须和后端upload.single('photo')的参数名完全一致，大小写不能错
  formData.append('photo', this.formdata.photo)

  PostService.createPost(formData)
    .then(() => {
      console.log('success')
    })
}

注意：不需要手动在请求头中设置Content-Type: multipart/form-data，浏览器会自动为FormData请求带上正确的分隔符标识，手动添加反而会导致分隔符缺失，后端解析失败。

3. 给后端增加异常兜底 #

原后端代码直接读取req.file.location，如果前端没传文件，req.file为null，就会触发空引用报错直接返回500。可以在逻辑开头加判断提前拦截：

router.post("/add-story", upload.single('photo'), async(req, res) => {
  try{
    // 新增兜底判断
    if (!req.file) {
      return res.status(400).json({
        success: false,
        message: '未检测到上传的图片文件'
      })
    }
    let post = new Post();
    post.title = req.body.title;
    post.description = req.body.description;
    post.photo = req.file.location;
    post.body = req.body.body;
    post.snippet = req.body.snippet;

    await post.save();
    
    res.json({
      status: true,
      message: "Successfully saved."
    });
    
  } catch(err) {
    res.status(500).json({
      success: false,
      message: err.message
    });
  }
});

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