如何在 Vue 和 Laravel 中使用 axios 上传图像文件和数据对象？

Posted 2023-02-22

【中文标题】如何在 Vue 和 Laravel 中使用 axios 上传图像文件和数据对象？

【英文标题】：How can i upload image file and data object with axios in Vue & Laravel?

【发布时间】：2020-08-10 02:32:22

【问题描述】：

我正在努力使用 Vue、Laravel 和 Axios 将图像和几个文本/数字数据字段上传到 mysql 数据库。

这是我的 Vue 组件中的方法：

 addProductToShop() 
      const imageData = this.$refs.inputUpload.files[0];
      const formData = new FormData();
      formData.append("image", imageData);

      axios
        .post("api/createProduct", 
          formData,
          ...this.newProduct
        )
        .then(res => 
          console.log(res);
        );
    ,

这是我的 Laravel 控制器中的方法：

public function create(Request $request)

    $product = Product::create([
        'name' => $request->name,
        'price' => $request->price,
        'amountInStock' => $request->amountInStock,
        'image' => $request->image->store('ProductImages', 'public'),
        'measuringUnitId' => $request->measuringUnitId,
        'categoryId' => $request->categoryId,
        'shopId' => $request->shopId,
    ]);

    return response()->json([
        'status' => 'success',
        'message' => 'Product added seccessfully',
        'product' => $product
    ], 200);

这是望远镜中的请求正文：

  "formData": [],
  "name": "111",
  "categoryId": null,
  "price": "111",
  "amountInStock": "111",
  "measuringUnitId": 2,
  "visability": true

这是我得到的错误：Call to a member function store() on null

我已经尝试添加多格式数据标题：

   headers: 
        'Content-Type': 'multipart/form-data'
    

但是，他们产生了这个错误：Missing boundary in multipart/form-data POST data in Unknown on line 0 所以，它们现在似乎已经过时了，因为 axios 基于 FormData() 知道正确的 formData。

有人能指出我做错了什么吗？提前致谢！

【参考方案1】：

此处出错：

'image' => $request->image->store('ProductImages', 'public')

正确方法：

'image' => $request->file('image')->store('ProductImages', 'public')