如何使用 vue 在一个请求中发送 json 参数和 multipart/form-data 文件

Posted 2023-02-23

【中文标题】如何使用 vue 在一个请求中发送 json 参数和 multipart/form-data 文件

【英文标题】：How to send json parameter and multipart/form-data file in one request with vue

【发布时间】：2020-03-04 05:00:27

【问题描述】：

如何像邮递员一样用vue在一个请求中发送json参数和multipart/form-data文件？

我搜索了how to submit "multipart/form-data" from VueJs 。我想要的是多部分格式的图像文件，以及一个 json 对象中的其他参数（内容类型为 json）。所有参数都作为单个 http 请求发送。

主要区别是如何在单个http post请求中发送json参数和multipart文件？

【问题讨论】：

how to submit "multipart/form-data" from VueJs的可能重复

@MartenCatcher 我已经搜索了这个问题。我想要多部分格式的图像文件，以及 json 中的其他参数。所有参数都作为单个 http 请求发送。

@user7328234 你不能在一个请求中发送 multipart 和 json，那是行不通的。将参数添加到多部分请求中更容易

【参考方案1】：

我也遇到了同样的问题，我想分享我所做的。 我正在尝试上传图片、种类、名称和 eventID。

let logo1 = new FormData
logo1.append('image', this.logo1)
logo1.append('kind', 'logo1')
logo1.append('name', this.$refs.logo1.files[0].name )
logo1.append('eventID',eventID)


axios.post(`/upload`, logo1,
            
   
      headers:
          'Authorization' : `$token`,
          'Content-Type': `multipart/form-data; boundary=$logo1._boundary` 
  ,    

  ).then((res) => 

     console.log(res)


  ).catch((error) => 

    console.log(error)

  )

注意：postdata 参数格式应该是 (url, FormData) 而不是 (url, data: FormData)

【参考方案2】：

首先，这不是一个vue相关的问题。 this answer 有一个解决方案。另一种解决方案（如果请求中的内容类型不是优先级）是使用简单的 FormData。您可以轻松插入图像并将 json 作为纯文本发送。但是，这需要在服务器端对您的模型进行额外的解析/映射。