Wie setze ich Multipart in Axios mit React?

71

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.

Shamoon
quelle
Was ist der genaue Fehler hier? Erhalten Sie einen bestimmten Antwortcode vom Server? Auch das Posten von Fiddler-Ereignisprotokollen könnte helfen.
gefährlich

Antworten:

124

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

Ashik Nesin
quelle
2
Wie sende ich in diesem Fall mehrere Dateien?
Dani Vijay
3
Warum müssen Sie angeben multipart/form-data? Es sollte bereits eingebaut sein FormData . Quelle ( github.com/axios/axios/issues/318#issuecomment-218948420 )
Artem Bernatskyi
Sie können das Formularelement als Argument übergeben, wenn Sie ein FormDataObjekt instanziieren. Dies ist sehr nützlich, da das Objekt mit den Schlüsseln des Formulars und ihren Werten gefüllt wird.
Darragh Enright
11

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

Shota
quelle
2

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.

SHREYA PRASAD
quelle