Vue前端上传文件FormData为空致Multer无法读取req.file问题咨询

v-model绑定是否影响上传？ #

不会。你用的是Vuetify的v-file-input组件，该组件封装后原生支持通过v-model直接获取选中的File对象，这部分逻辑是正确的。普通示例不用v-model大多是因为用了原生文件输入框，原生input的v-model无法直接返回File对象，需要手动监听change事件读取event.target.files，和你的场景不冲突。

上传失败的核心原因 #

你代码的核心问题是将FormData嵌套在普通对象中传给axios，axios默认会将普通对象序列化为JSON字符串，直接销毁了FormData的二进制结构，导致后端Multer无法识别文件：

• Vuex action中你构造了{photo: FormData}的普通对象作为请求体，而非直接传递FormData本身
• 传递FormData时没有正确配置请求头，axios无法自动识别上传类型
• 冗余逻辑：将FormData存入Vuex state完全无意义，state应该存上传完成后返回的图片访问地址

修正代码 #

1. Vuex action 修正 #

async updateMe({ commit, getters }, payload) {
  try {
    let token = getters.token;
    // 直接传FormData作为请求体，不要嵌套在普通对象里
    const response = await axios.patch(
      `http://localhost:3000/api/v1/users/updateMe`,
      payload.photo, 
      {
        headers: {
          Authorization: 'Bearer ' + token
          // 传FormData时axios会自动设置带boundary的multipart/form-data头，不用手动填写，手动写反而可能出错
        }
      }
    );
    commit('setUpdatedUser', response.data.updatedUser);
  } catch (err) {
    console.log(err);
  }
}

如果后续需要同时传用户名、邮箱等其他字段，直接在构造FormData的时候append进去即可：

// 前端submit方法中示例
formData.append('name', this.name)
formData.append('email', this.email)

2. Mutation 修正 #

不要存FormData到state，直接用后端返回的用户信息覆盖即可：

setUpdatedUser(state, payload) {
  state.name = payload.name;
  state.email = payload.email;
  // 这里的payload.photo是后端返回的图片访问url，不是FormData
  state.photo = payload.photo;
}

调试小技巧 #

如果要验证FormData是否正确填充，不要直接console.log(formData)，浏览器会显示空对象，要用formData.get('photo')查看对应字段的值，或者用for...of遍历FormData的所有键值对。

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