반작용을 가진 공리에서 멀티파트를 설정하려면 어떻게 해야 합니까?

반작용을 가진 공리에서 멀티파트를 설정하려면 어떻게 해야 합니까?

무언가를 컬링하면 정상적으로 동작합니다.

curl -L -i -H 'x-device-id: abc' -F "url=http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"  http://example.com/upload

어떻게 하면 공리들을 제대로 작동시킬 수 있을까요?문제가 될 경우 리액션을 사용합니다.

uploadURL (url) {
  return axios.post({
    url: 'http://example.com/upload',
    data: {
      url: url
    },
    headers: {
      'x-device-id': 'stuff',
      'Content-Type': 'multipart/form-data'
    }
  })
  .then((response) => response.data)
}

무슨 이유에선지 이게 안 되네

Axios를 사용하여 반응으로 파일을 업로드하는 방법은 다음과 같습니다.

import React from 'react'
import axios, { post } from 'axios';

class SimpleReactFileUpload extends React.Component {

  constructor(props) {
    super(props);
    this.state ={
      file:null
    }
    this.onFormSubmit = this.onFormSubmit.bind(this)
    this.onChange = this.onChange.bind(this)
    this.fileUpload = this.fileUpload.bind(this)
  }

  onFormSubmit(e){
    e.preventDefault() // Stop form submit
    this.fileUpload(this.state.file).then((response)=>{
      console.log(response.data);
    })
  }

  onChange(e) {
    this.setState({file:e.target.files[0]})
  }

  fileUpload(file){
    const url = 'http://example.com/file-upload';
    const formData = new FormData();
    formData.append('file',file)
    const config = {
        headers: {
            'content-type': 'multipart/form-data'
        }
    }
    return  post(url, formData,config)
  }

  render() {
    return (
      <form onSubmit={this.onFormSubmit}>
        <h1>File Upload</h1>
        <input type="file" onChange={this.onChange} />
        <button type="submit">Upload</button>
      </form>
   )
  }
}



export default SimpleReactFileUpload

원천

영숫자 데이터를 송신하는 경우는, 변경해 주세요.

'Content-Type': 'multipart/form-data'

로.

'Content-Type': 'application/x-www-form-urlencoded'

영숫자가 아닌 데이터를 보내는 경우 'Content-Type'을 제거해 보십시오.

그래도 동작하지 않으면 request-promise(적어도 실제로 문제가 있는지 여부를 테스트하기 위해)를 검토해 주십시오.

네. 위의 두 가지 방법을 시도해 봤지만 효과가 없었어요.시행착오를 거쳐 실제로 파일이 'this.state'에 저장되지 않았다는 것을 알게 되었습니다.file' 변수.

fileUpload = (e) => {
    let data = e.target.files
    if(e.target.files[0]!=null){
        this.props.UserAction.fileUpload(data[0], this.fallBackMethod)
    }
}

여기서 fileUpload는 이와 같은 두 개의 매개 변수를 받아들이는 다른 js 파일입니다.

export default (file , callback) => {
const formData = new FormData();
formData.append('fileUpload', file);

return dispatch => {
    axios.put(BaseUrl.RestUrl + "ur/url", formData)
        .then(response => {
            callback(response.data);
        }).catch(error => {
         console.log("*****  "+error)
    });
}

}

컨스트럭터에서 메서드를 바인딩하는 것을 잊지 마십시오.도움이 더 필요하시면 말씀하세요.

언급URL : https://stackoverflow.com/questions/41878838/how-do-i-set-multipart-in-axios-with-react