서버에 문서를 제출하고 formData가 비어있는 것처럼 보입니다.

Question

지금 당분간이 문제로 고심하고 있으며 해결해야합니다.

React-Redux 응용 프로그램에서 파일 업로드를 설정하려면 react-dropzone을 사용하고 있습니다. 서버에 성공적으로 전송되었지만 서버 (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.