Wie setze ich Multipart in Axios mit React?

Wenn ich etwas kräusele, funktioniert es 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 kann ich das mit Axios richtig machen? 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 aus irgendeinem Grund nicht.

Hier erfahren Sie, wie ich Dateien mit Axios hochlade

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

Quelle

Wenn Sie alphanumerische Daten senden, versuchen Sie dies zu ändern

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

zu

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

Wenn Sie nicht alphanumerische Daten senden, versuchen Sie, 'Content-Type' überhaupt zu entfernen.

Wenn es immer noch nicht funktioniert, versuchen Sie es mit einem Anforderungsversprechen (zumindest um zu testen, ob es sich wirklich um ein Axios-Problem handelt oder nicht).

in Ordnung. Ich habe die beiden oben genannten Möglichkeiten ausprobiert, aber es hat bei mir nicht funktioniert. Nach Versuch und Irrtum stellte ich fest, dass die Datei tatsächlich nicht in der Variablen 'this.state.file' gespeichert wurde.

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

hier ist fileUpload eine andere js-Datei, die zwei Parameter wie diesen akzeptiert

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

}}

Vergessen Sie nicht, die Methode im Konstruktor zu binden. Lassen Sie mich wissen, wenn Sie weitere Hilfe benötigen.