上传图片来自 laravel api
Uploading images from react with laravel api
我在使用 laravel API 从反应输入上传文件时遇到问题。
我正在使用 react-hook-form。
我的form和onSave如下
const onSave = data => {
// data.picture = imgs; here I tried changing the picture to event.target.files from the file input, didn't work either.
axios.defaults.headers.common["Authorization"] = "Bearer " + token;
axios
.post(`/api/products/store`, data, {})
.then(res => {
console.log(res);
})
.catch(err => console.log(err));
};
return (
<form onSubmit={handleSubmit(onSave)} encType="multipart/form-data">
<input
type="file"
name="picture[]"
label="Product Picture"
onChange={handlePicInput}
className={classes.inputFile}
multiple
/>
//other inputs
</form>
);
我的 post 请求导致此控制器方法
public function store(Request $request)
{
$imageNames = '';
$pictures = (object) $request->file('picture');
//$pictures = $request->allFiles();
//$pictures = (object) $request->file('picture[]');
//$pictures = (object) $request->files;
foreach ($pictures as $key => $picture) {
/*WHEN I'M USING POSTMAN OR INSOMNIA,
this foreach loop is accessed but
the react form just skips the foreach completely */
$imageNames = $imageNames . $picture->store('product_pictures', 'public') . ',';
}
$product = Product::create([
'name' => $request->name,
'prices_amountmax' => $request->prices_amountmax,
'prices_amountmin' => $request->prices_amountmax,
'brand' => $request->brand,
'manufacturer' => $request->manufacturer,
'weight' => $request->weight,
'category_id' => $request->category_id,
'stock' => $request->stock,
'imageurls' => $imageNames
]);
$product->save();
}
综上所述,我用postman测试了上传图片,效果很好,所以问题一定出在react form上?
感谢您的任何帮助
要使用 js 上传图片,您可以使用 FormData。我看不到您的 handlePicInput 方法来了解如何处理输入更改,但也许这段代码可以帮助您了解进一步的操作。
function handlePicInput(event){
let images = event.target.files
let fd = new FormData()
fd.append("images", images);
}
然后您可以将其他值附加到 fd 并通过 axios 发送
axios.post(`/api/products/store`, fd)
再说一次,在哪里放置代码以及如何处理您必须自己管理的其他输入,或者提供更多数据
尝试将其作为 formData 发送,包含多个文件:
const onSave = data => {
const formData = new FormData();
for (let i in data) {
if(i === 'picture[]'){
for(let file of data[i]){
formData.append('picture',file);
}
}else{
formData.append(i, data[i])
}
}
// data.picture = imgs; here I tried changing the picture to event.target.files from the file input, didn't work either.
axios.defaults.headers.common["Authorization"] = "Bearer " + token;
axios
.post(`/api/products/store`, formData, {})
.then(res => {
console.log(res);
})
.catch(err => console.log(err));
};
我用我的 Node/Express 后端测试了它,它似乎可以工作。 "picture" 将是一个文件数组。如果您的 php 后端无法正确识别,请尝试将 formData.append('picture',file) 更改为 formData.append('picture[]',file),然后您还需要更改 php.
中的名称
我在使用 laravel API 从反应输入上传文件时遇到问题。 我正在使用 react-hook-form。 我的form和onSave如下
const onSave = data => {
// data.picture = imgs; here I tried changing the picture to event.target.files from the file input, didn't work either.
axios.defaults.headers.common["Authorization"] = "Bearer " + token;
axios
.post(`/api/products/store`, data, {})
.then(res => {
console.log(res);
})
.catch(err => console.log(err));
};
return (
<form onSubmit={handleSubmit(onSave)} encType="multipart/form-data">
<input
type="file"
name="picture[]"
label="Product Picture"
onChange={handlePicInput}
className={classes.inputFile}
multiple
/>
//other inputs
</form>
);
我的 post 请求导致此控制器方法
public function store(Request $request)
{
$imageNames = '';
$pictures = (object) $request->file('picture');
//$pictures = $request->allFiles();
//$pictures = (object) $request->file('picture[]');
//$pictures = (object) $request->files;
foreach ($pictures as $key => $picture) {
/*WHEN I'M USING POSTMAN OR INSOMNIA,
this foreach loop is accessed but
the react form just skips the foreach completely */
$imageNames = $imageNames . $picture->store('product_pictures', 'public') . ',';
}
$product = Product::create([
'name' => $request->name,
'prices_amountmax' => $request->prices_amountmax,
'prices_amountmin' => $request->prices_amountmax,
'brand' => $request->brand,
'manufacturer' => $request->manufacturer,
'weight' => $request->weight,
'category_id' => $request->category_id,
'stock' => $request->stock,
'imageurls' => $imageNames
]);
$product->save();
}
综上所述,我用postman测试了上传图片,效果很好,所以问题一定出在react form上? 感谢您的任何帮助
要使用 js 上传图片,您可以使用 FormData。我看不到您的 handlePicInput 方法来了解如何处理输入更改,但也许这段代码可以帮助您了解进一步的操作。
function handlePicInput(event){
let images = event.target.files
let fd = new FormData()
fd.append("images", images);
}
然后您可以将其他值附加到 fd 并通过 axios 发送
axios.post(`/api/products/store`, fd)
再说一次,在哪里放置代码以及如何处理您必须自己管理的其他输入,或者提供更多数据
尝试将其作为 formData 发送,包含多个文件:
const onSave = data => {
const formData = new FormData();
for (let i in data) {
if(i === 'picture[]'){
for(let file of data[i]){
formData.append('picture',file);
}
}else{
formData.append(i, data[i])
}
}
// data.picture = imgs; here I tried changing the picture to event.target.files from the file input, didn't work either.
axios.defaults.headers.common["Authorization"] = "Bearer " + token;
axios
.post(`/api/products/store`, formData, {})
.then(res => {
console.log(res);
})
.catch(err => console.log(err));
};
我用我的 Node/Express 后端测试了它,它似乎可以工作。 "picture" 将是一个文件数组。如果您的 php 后端无法正确识别,请尝试将 formData.append('picture',file) 更改为 formData.append('picture[]',file),然后您还需要更改 php.
中的名称