NodeJS+VueJS项目Multer文件上传时req.file为undefined问题

你后端的Multer基础配置没有语法错误，问题基本集中在前后端字段匹配、前端提交逻辑两个方向，按以下优先级排查：

• 1. 优先修复前端提交逻辑（90%概率是这个问题） #

  你在表单上绑定了@submit.prevent，已经阻止了浏览器原生的表单提交行为，此时form标签上的enctype="multipart/form-data"不会自动生效：

  • Vue的v-model默认不支持file类型输入框的双向绑定，你当前的文件选择框只写了name="image"，没有绑定选中文件的取值逻辑，选中的文件根本没有被存入提交数据中。
  • 如果你提交请求时直接发送JSON格式的bookingData对象，文件二进制数据完全不会被包含在请求体里，后端自然拿不到req.file。

  修复步骤：

  1. 给文件输入框加change事件，缓存选中的文件：

     <input
       class="form-control"
       type="file"
       name="image"
       id="formFileMultiple"
       @change="e => selectedFile = e.target.files[0]"
     />
     

  2. 在提交方法handleBooking中，使用FormData格式组装请求参数，不要直接发送JSON：

     async handleBooking() {
       const formData = new FormData()
       // 追加普通业务字段，和你后端req.body取的字段名保持一致
       formData.append('hallID', this.bookingData.hallID)
       formData.append('timeSlot', this.bookingData.event_timeslots)
       formData.append('date', this.bookingData.event_date)
       formData.append('name', this.bookingData.event_name)
       formData.append('description', this.bookingData.event_desc)
       formData.append('username', this.bookingData.username)
       // 追加文件字段，字段名必须和后端配置完全一致
       if (this.selectedFile) {
         formData.append('image', this.selectedFile)
       }
       // 发送请求，*禁止手动设置Content-Type请求头*，让浏览器自动生成带boundary的multipart/form-data头
       await axios.post('/events', formData)
     }
     

• 2. 校验前后端字段名一致性 #

  你后端配置的是upload.single('image')，意味着Multer只会解析请求中字段名为image的单文件，前端FormData.append文件时的第一个参数必须严格等于image，大小写、拼写有任何偏差都会导致解析失败，req.file返回undefined。

• 3. 校验上传目录可用性 #

  Multer不会自动创建你配置的上传目录，需要手动确认./public/uploads/images路径真实存在，且启动Node服务的账号对该目录有写入权限，目录不存在或无权限会导致文件写入失败，解析流程中断。

• 4. 校验请求头配置 #

  不要手动给上传接口的请求设置Content-Type: application/json，也不要手动写死Content-Type: multipart/form-data（手动写死会丢失浏览器自动生成的boundary分隔符，Multer无法解析请求体边界）。

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