実現したいこと
reactjsを使用しファイルをファイルサーバーに送信/保存したい。
前提
以下の”該当のソースコード”はreactjsのクラスコンポーネントで書かれたファイルをクライアント側からファイルサーバーに送信するファイルアップロード用の記述です。サーバー側にある受取用の記述を経由してファイルサーバーに送信されます。実際に想定通りに動作しております。
質問させて頂きたいことは以下のクラスコンポーネントで書かれた記述を関数コンポーネント用の記述に書き換えたのですが、以下のエラーがコンソールで表示されます。送信したファイルが空だということだと思うのですが、サーバー側にある受取用の記述はクラスコンポーネントも関数コンポーネント同じですので、関数コンポーネント用の記述に問題があると思われます。関数コンポーネント用の記述をどの様に変更すれば宜しいかご教授頂けませんでしょうか?
発生している問題・エラーメッセージ
end() expects parameter 1 to be array, null given in Undefined variable: file_tmp
該当のソースコード
クラスコンポーネント用の記述
import React from 'react' import axios from 'axios'; class FileUpload extends React.Component{ constructor(){ super(); this.state = { selectedFile:'', } this.handleInputChange = this.handleInputChange.bind(this); } handleInputChange(event) { this.setState({selectedFile: event.target.files[0],}) } submit(){ const data = new FormData() data.append('file', this.state.selectedFile) console.warn(this.state.selectedFile); let url = "https://xxxxx/x/xxxxx/"; axios.post(url, data, { }) .then(res => { console.warn(res); }) } render(){ return( <div> <input type="file" name="upload_file" onChange={this.handleInputChange} /> <button type="submit" onClick={()=>this.submit()}>Save</button> </div> ) } } export default FileUpload;
試したこと
関数コンポーネント用に書き換えた記述
import React, { useState } from 'react' import axios from 'axios'; function FileUpload () { const [selectedFile, setSelectedFile] = useState(''); const handleInputChange = event => { setSelectedFile(selectedFile); } const submit = () => { const data = new FormData() data.append("file", selectedFile); console.warn(selectedFile); let url = "https://xxxxxx/x/xxxxx/"; axios.post(url, data, { headers: { 'content-type': 'multipart/form-data', } }) .then(res => { console.warn(res); }) } return( <div> <input type="file" name="upload_file" onChange={handleInputChange} /> <button type="submit" onClick={()=>submit()}>Save</button> </div> ); } export default FileUpload;
補足情報(FW/ツールのバージョンなど)
axios@1.3.1
react-dom@18.2.0
react-scripts@5.0.1
react@18.2.0

回答1件
あなたの回答
tips
プレビュー
下記のような回答は推奨されていません。
このような回答には修正を依頼しましょう。
また依頼した内容が修正された場合は、修正依頼を取り消すようにしましょう。
2023/03/28 02:25
2023/03/28 02:53
2023/03/28 07:16