在Vue+Laravel项目中如何用axios同时发送数组和FormData？

你只需要把数组类型的this.product序列化后追加到现有的FormData对象中，直接将完整的FormData作为axios.post的第二个参数提交即可，因为multipart/form-data请求格式本身支持同时传输文件和普通字段，不需要额外拆分请求。

修改后的前端代码 #

submit(){
    // 初始化FormData
    const formData = new FormData()
    formData.append('images', this.imagesInfo)

    // 数组转JSON字符串后加入FormData
    const product = {
        data: this.data, 
        option: this.option
    }
    formData.append('product', JSON.stringify(product))

    // 直接提交FormData即可，axios会自动识别FormData并设置正确的请求头
    axios.post('/admin/product/add', formData, {
        headers: {
            'Content-Type': 'multipart/form-data'
        }
    })
}

Laravel后端接收处理 #

在对应的控制器方法中，将接收到的product字符串反序列化为数组即可使用：

public function add(Request $request)
{
    // 获取上传的图片
    $images = $request->file('images');
    // 反序列化product数据
    $product = json_decode($request->input('product'), true);
    $data = $product['data'];
    $option = $product['option'];

    // 后续业务逻辑
}

注意事项 #

• 如果你的this.imagesInfo是多图数组，需要循环遍历append到FormData，字段名用images[]格式：

  this.imagesInfo.forEach(img => {
      formData.append('images[]', img)
  })
  

  后端直接用$request->file('images')就能拿到全部上传的图片数组。
• 不手动设置Content-Type也可以，axios检测到传入的是FormData对象时，会自动设置正确的请求头并补全boundary参数。

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