Jak ustawić wieloczęściowy w axios z reagowaniem?

Question

Kiedy zwijają coś, to działa dobrze:

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

Jak mogę uzyskać to prawo do pracy z Axios? Używam reakcji, jeśli to ma znaczenie:

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) 
} 

To nie działa z jakiegoś powodu.

Answer 1

Oto jak ja plik przesłać w reakcji za pomocą 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 

Source

Answer 2

Jeśli wysyłasz dane alfanumeryczne spróbuj zmienić

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

do

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

Jeśli wysyłasz dane niealfanumeryczne próby usunięcia 'Content-Type' w ogóle.

Jeśli nadal nie działa, należy rozważyć próbuje request-promise (przynajmniej sprawdzić, czy jest to naprawdę Axios problemu lub nie)