この問題はしばらく解決していませんでしたが、解決する必要があります。サーバーへのドキュメントの送信とformDataが空白のようです
私はreact-dropzone
を使用して、React-Reduxアプリケーションでファイルのアップロードをセットアップしています。正常にサーバーに送信されたが、サーバー(Django REST Framework
)が受信したものは空のMultiValueDict
のように見えます。ただし、要求ペイロードには次のものがあります。
------WebKitFormBoundaryWiq9rPvu5bpEoR4X
Content-Disposition: form-data; name="file"
[object File]
------WebKitFormBoundaryWiq9rPvu5bpEoR4X--
多分、フロントエンドは問題ありませんが、サーバ側で何かが起こっている可能性があります。どこに問題が発生しているのかを特定しようとしています。私はちょうどconsole.log(formData)
ファイルがそこに追加されていることを示すようではないことを知っている。
// ./containers/documents/submit_documents.js
import _ from 'lodash';
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { submitDocument } from '../../actions/documents';
import Dropzone from 'react-dropzone';
class SubmitDocuments extends Component {
constructor() {
super();
this.state = {
files: []
}
this.handleClick = this.handleClick.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
this.onDrop = this.onDrop.bind(this);
}
handleClick(event) {
this.setState({
files: []
});
}
handleSubmit(event) {
event.preventDefault();
this.props.submitDocument(this.state.files);
}
onDrop(files) {
// console.log(files);
// files.push(this.state.files);
this.setState({
files
});
}
render() {
return (
<form onSubmit={this.handleSubmit}>
<div className='panel panel-default'>
<div className='panel-heading'>
<h4><strong>Submit Documents</strong></h4>
</div>
<div className='panel-body'>
<Dropzone className='dropzone' onDrop={this.onDrop}>
<h3>Click to add files or drag files here to upload</h3>
</Dropzone>
<div>
{_.map(this.state.files, f =>
<h5 key={f.name}>{f.name} - {f.size} bytes</h5>
)}
</div>
<button type='submit' className='btn btn-primary'>Submit</button>
<button type='button' className='btn btn-danger' onClick={this.handleClick}>Cancel</button>
</div>
</div>
</form>
);
}
}
function mapStateToProps(state) {
return {
documents: state.home.documents
}
}
export default connect(mapStateToProps, { submitDocument })(SubmitDocuments);
と、関連するアクション・ファイル:とにかく
は、ここに私のコードです サーバはそれが必要のように思えるfile
でキーと値のペアを、期待しているように思え
// ../actions/documents.js
import axios from 'axios';
import { push } from 'react-router-redux';
import { ROOT_URL } from '../../config/config.json';
// Establish the different types
export const DOCUMENTS = 'documents';
// Creates the error state to be used in components
export function submitDocument(files) {
const formData = new FormData();
formData.append('file', files);
console.log(formData);
return function(dispatch) {
axios
.post(
`${ROOT_URL}/api/documents/fileupload`,
formData,
{ headers:
{
'content-type': 'multipart/form-data',
'Authorization': 'JWT ' + sessionStorage.getItem('token')
}
}
)
.then(response => {
console.log('Success')
})
.catch(error => {
console.log('Failed');
});
}
}
formData.append('file', files);
で作成されているかもしれませんが、そこにそのようなものは見られません。
ありがとうございました!
'ファイル'と各 'formData.append(file.name、file.data)'を反復しようとします。 – arpl
うん、それは働いていた。あなたの回答を提出したいのであれば、それを答えとして受け入れます。 – sockpuppet