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.
javascript
reactjs
multipartform-data
axios
Shamoon
quelle
quelle
Antworten:
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
quelle
multipart/form-data
? Es sollte bereits eingebaut seinFormData
. Quelle ( github.com/axios/axios/issues/318#issuecomment-218948420 )FormData
Objekt instanziieren. Dies ist sehr nützlich, da das Objekt mit den Schlüsseln des Formulars und ihren Werten gefüllt wird.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).
quelle
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.
quelle