サーバーへのドキュメントの送信とformDataが空白のようです

Question

この問題はしばらく解決していませんでしたが、解決する必要があります。

私は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);で作成されているかもしれませんが、そこにそのようなものは見られません。

ありがとうございました！

Answer 1

filesおよびそれぞれformData.append(file.name, file.data)について繰り返す。

onDropメソッドは、Filesの配列を提供し、サーバーに送信することができます。

How to upload files using FormData。