VueJS上传图片转Blob提交数据库FormData报错解决方法

你遇到的Failed to execute 'append' on 'FormData': parameter 2 is not of type 'Blob'报错，本质是传入FormData.append()的第二个参数不是合法的Blob/File类型值，不需要额外做复杂的Blob转换——浏览器原生的File对象本身就是Blob的子类，只要拿到文件输入框选中的真实File对象，直接传入append方法就可以正常提交。

你当前代码里的values.image不是选中的文件对象本身：绝大多数表单封装逻辑（包括Vue/React下的各类表单库）默认不会自动收集file类型输入的原生File对象，你拿到的大概率是表单库包装后的假值、输入框的虚拟路径字符串、甚至是undefined，自然不符合参数要求。

• 拦截文件选择事件，拿到真实的File对象
  不要依赖表单库自动收集的image字段值，给文件输入框单独绑定change事件，直接从事件对象里取原生选中的文件：

  <input 
    name="image" 
    class="w-full border-2 border-gray-200 rounded-3xl px-4 py-4" 
    type="file" 
    accept="image/*"
    @change="onImagePick"
    placeholder="Event Image" 
  />
  

  在组件方法里存储拿到的真实文件：

  data() {
    return {
      pickedImageFile: null
    }
  },
  methods: {
    onImagePick(e) {
      // 取第一个选中的文件，就是标准File类型，可直接传入FormData
      this.pickedImageFile = e.target.files[0]
    },
    // 原有提交方法
    async onSubmit(values) {
      console.log("button submitted")
      try {
        var formdata = new FormData();
        formdata.append("name", values.eventname);
        formdata.append("description", values.eventdescription);
        // 传入真实存储的File对象，文件名直接取文件本身的name属性即可
        if (this.pickedImageFile) {
          formdata.append("image", this.pickedImageFile, this.pickedImageFile.name);
        }
        // 后续提交逻辑注意：不要手动设置Content-Type请求头，让浏览器自动生成带boundary的multipart/form-data头，否则后端会解析失败
      } catch (err) {
        console.error(err)
      }
    }
  }
  

• 特殊场景手动转Blob（仅当你拿到的是文件二进制ArrayBuffer时才需要）
  如果你是从其他渠道拿到了图片的二进制ArrayBuffer数据，确实需要手动转Blob的话，直接用原生Blob构造函数即可：

  // 假设arrayBuffer是图片二进制内容，mimeType对应文件类型，比如image/png、image/jpeg
  const imageBlob = new Blob([arrayBuffer], { type: "image/png" })
  formdata.append("image", imageBlob, "upload-image.png")
  

• 不要直接传文件输入框的value属性值，这个值是浏览器出于安全考虑生成的假路径字符串，不是文件对象，传入会触发同类报错
• 多图上传场景下要遍历e.target.files集合，逐个把File对象append到FormData里，不能直接传整个FileList实例
• 提交FormData时手动设置Content-Type: multipart/form-data会导致浏览器丢失自动生成的boundary分隔符，直接造成后端解析文件失败，不要手动加这个请求头。

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