Vue.js使用vform校验含图片表单时objectToFormData报错的修复

直接报错的触发原因 #

objectToFormData is not a function本质是代码运行到调用这个方法时，取到的是undefined，常见成因有三类：

• 只写了import语句，没有实际安装对应依赖包，导致打包阶段拿不到模块导出
• 模块导入方式和当前安装的包版本不匹配，具名导入没有拿到实际的函数对象
• 全局挂载window变量的时机晚于组件代码执行，调用的时候变量还没初始化

分步修复操作 #

1. 修正全局模块挂载逻辑 #

修改app.js里的模块导入和挂载代码，兼容不同版本的导出结构，保证能拿到正确的函数：

window.Vue = require('vue');
import { Form, HasError, AlertError } from 'vform'
// 兼容包的不同导出格式，避免具名/默认导出不匹配拿到undefined
import * as ObjectToFormDataLib from 'object-to-formdata'
const objectToFormData = ObjectToFormDataLib.objectToFormData || ObjectToFormDataLib.default
window.Form = Form;
window.objectToFormData = objectToFormData;

注意：操作前先确认本地项目已经通过包管理器安装了object-to-formdata依赖，不要只写import语句不装包。

2. 修正业务逻辑的错位问题 #

你当前的saveImageData方法存在逻辑冗余、逻辑脱节的问题，就算报错消了，图片上传的逻辑也跑不通：

• 手动创建的let formData = new FormData()没有被传递给后续请求，所有手动append的字段都是无效操作
• vform的submit方法自带的transformRequest回调，第一个参数接收的是vform实例维护的纯表单数据，不是外部创建的FormData实例，当前写法相当于做了二次无意义转换

修正后的完整方法代码参考：

saveImageData() {
  // 清空文件输入框，保证后续选文件能正常触发变更事件
  document.getElementById('upload-file').value = [];
  // 直接发起提交，通过transformRequest完成表单数据到FormData的转换
  this.form.submit('post', '/senddata', {
    transformRequest: [function (formDataData, headers) {
      // 函数入参是vform携带的全量数据，包含title、price、images文件数组
      return objectToFormData(formDataData)
    }],
    headers: { 'content-type': 'multipart/form-data' }
  })
}

额外避坑说明 #

• 不需要手动循环把images数组append到FormData里，objectToFormData会自动识别File类型的字段，正确追加到上传表单中，手动写循环反而会造成字段重复
• 两种FormData生成方式不要混用：如果选择手动创建FormData做自定义字段处理，就不要用vform的submit发起请求，直接用配置好的axios实例传FormData对象即可，混写会导致字段覆盖、格式错乱。

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