Reactでのファイルのアップロード方法は色々な方法があります。
代表的な方法は、FormDataを利用する方法だと思います。
簡単なサンプルを記載します。
ぜひ、参考にしていただければと思います。
Reactだと、ファイルアップロードも非同期でスムーズ!
React側
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
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> </> ) } |
Laravel側
|
1 2 3 4 5 6 7 8 9 10 11 12 |
public function api_fileupload(ProductRequest $request) { $ret = $request->all(); return response()->json( [ 'data' => $ret, ], 200, [], JSON_UNESCAPED_UNICODE ); } |
