如何在 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 上传图像文件和数据对象?的主要内容,如果未能解决你的问题,请参考以下文章