使用 laravel api 上传图片

Question

我在使用 laravel API 从反应输入上传文件时遇到问题。我正在使用 react-hook-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>
);

我的帖子请求导致了这个控制器方法

 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表单上？谢谢你的任何帮助

Answer 1

要使用 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)

再次，将代码放在哪里以及如何处理您必须自己管理的其他输入，或提供更多数据