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

Posted

技术标签:

【中文标题】如何在 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')

【讨论】:

以上是关于如何在 Vue 和 Laravel 中使用 axios 上传图像文件和数据对象?的主要内容,如果未能解决你的问题,请参考以下文章

如何在 vue 组件中使用 laravel 资产

如何使用 Vue 在 Laravel 中切换汉堡按钮?

如何在 Laravel 和 Vue.js 中使用 jwt-auth 检查用户是不是经过身份验证

如何在 vue js 和 laravel 中使用外部脚本

如何在 laravel 中添加库 vue?

如何在 Vue 3 中重定向另一个路由器? (在 Laravel 8 中使用 next.router 和 vue 3)