web-dev-qa-db-ja.com

reactjsによる複数ファイルのアップロード

私はreactjsを初めて使用し、複数のファイルをアップロードしようとしています。ファイルを配列として状態コンポーネントに保存できます。しかし、データをaxios postメソッドに渡すと、ファイルのリストが[object FileList]として表示されます。そして、そのファイルをたどって保存することができませんでした。 「react-Dropzone」のように複数のファイルをアップロードするために複数の方法を試しました。しかし助けにはならなかった。

私の反応コード。

handleChange(event) {
  this.setState({ file: event.target.files })
}

async handleSubmit(e) {
  e.preventDefault()
  let res = await this.uploadFile(this.state.file);
}

async uploadFile(File){
  const formData = new FormData();

  formData.append('image', File)
  axios.post(UPLOAD_ENDPOINT, formData, {
    headers: {
      'content-type': 'multipart/form-data'
    }
  }).then(response => {
    console.log(response.data)
  });
}

render() {
  return (
    <form onSubmit={this.handleSubmit}>
      <input type="file" id="file" multiple name="file" onChange={this.handleChange} />
      <button type="submit" className="btn btn-info"> Update File </button>
    </form>
  )
}
reactjsreact-nativereact-routermultiple-file-upload
4
farooq

の

event.target.files

ファイルリストを提供し、フォームデータに追加するには、次のコードを使用します。

let files = event.target.files;

for (let i = 0; i < files.length; i++) {
    formData.append(`images[${i}]`, files[i])
}

サーバー側では、すべての画像を'images'リクエストオブジェクト/変数のキーから取得します

1
Saud Qureshi
for (let i = 0; i < files.length; i++) { 
    formdata.append(`images[${i}]`, {
                    uri: pathOfFile,
                    name: fileName.jpg,
                    type: mimeType(eg. "image/jpeg")
    });
}
1
shubham