React | FormDataによるファイルアップロード方法

Reactでのファイルのアップロード方法は色々な方法があります。

代表的な方法は、FormDataを利用する方法だと思います。

簡単なサンプルを記載します。

ぜひ、参考にしていただければと思います。

Reactだと、ファイルアップロードも非同期でスムーズ！

React側
Laravel側

React側

const FileTest = () => {

	const [docFile, setDocFile] = useState([])

	const getDocFile = (e) => {
		if(!e.target.files) return
		const file = e.target.files[0]
		setDocFile(file)
	}

	const handleSubmit = async (e) => {
		e.preventDefault();
		const formData = new FormData();
		formData.append('imagefile', docFile);
			const API_URL = `https://app.hogehoge/api/fileupload`
		    await axios.post(API_URL, formData, {
				headers: {
				"Content-Type": "multipart/form-data",
			},
		})
		.then(response => {
			toast.success("更新しました。")
		})
		.catch(error => {
			console.error('登録エラー:', error);
			toast.error("更新エラーが発生しました。")
		});
	}

	return (
		<>
			<form onSubmit={handleSubmit}>
				<input type="file" class="form-control" name="image_file" onChange={getDocFile} />
				<button type="submit">アップロード</button>
			</form>
		</>
	)
}

const FileTest = () => {

const [docFile, setDocFile] = useState([])

const getDocFile = (e) => {

if(!e.target.files) return

const file = e.target.files[0]

setDocFile(file)

}

const handleSubmit = async (e) => {

e.preventDefault();

const formData = new FormData();

formData.append('imagefile', docFile);

const API_URL = `https://app.hogehoge/api/fileupload`

await axios.post(API_URL, formData, {

headers: {

"Content-Type": "multipart/form-data",

})

.then(response => {

toast.success("更新しました。")

})

.catch(error => {

console.error('登録エラー:', error);

toast.error("更新エラーが発生しました。")

});

}

return (

<button type="submit">アップロード</button>

</form>

</>

)

}

Laravel側

    public function api_fileupload(ProductRequest $request)
    {
        $ret = $request->all();
        return response()->json(
            [
                'data' => $ret,
            ],
            200,
            [],
		JSON_UNESCAPED_UNICODE
		);
    }