Wie setze ich multipart in Axios mit reagieren?

Question

Wenn ich etwas kräuseln, es funktioniert gut:

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

Wie bekomme ich dieses Recht mit axios zu arbeiten? Ich benutze reagieren, wenn das wichtig ist:

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

Dies funktioniert nicht aus irgendeinem Grund.

Answer 1

Hier ist, wie ich in der Datei laden reagieren 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 mit

Answer 2

Wenn Sie senden die alphanumerischen Daten versuchen

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

zu

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

Wechsel Wenn Sie senden nicht-alphanumerischen Daten versuchen, alle 'Content-Type' zu entfernen.

Wenn es immer noch nicht funktioniert, sollten Sie request-promise versuchen (zumindest zu testen, ob es wirklich axios Problem ist oder nicht)