Comment définir multipart dans axios avec react?
Quand je boucle quelque chose, cela fonctionne bien:
curl -L -i -H 'x-device-id: abc' -F "url=http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" http://example.com/upload
Comment faire pour que cela fonctionne correctement avec axios? J'utilise react si cela compte:
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)
}
Cela ne fonctionne pas pour une raison quelconque.
3 réponses
Voici comment je fais le téléchargement de fichiers dans react en utilisant 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
Si vous envoyez des données alphanumériques, essayez de changer
'Content-Type': 'multipart/form-data'
À
'Content-Type': 'application/x-www-form-urlencoded'
Si vous envoyez des données non alphanumériques, essayez de supprimer 'Content-Type' du tout.
Si cela ne fonctionne toujours pas, pensez à essayer request-promise (au moins pour tester si c'est vraiment un problème axios ou non)
Ok. J'ai essayé les deux façons, mais cela n'a pas fonctionné pour moi. Après essais et erreurs, je suis venu à savoir qu'en fait le fichier n'a pas été enregistré dans ' ceci.état.fichier variable.
fileUpload = (e) => {
let data = e.target.files
if(e.target.files[0]!=null){
this.props.UserAction.fileUpload(data[0], this.fallBackMethod)
}
}
Ici fileUpload est un fichier JS différent qui accepte deux paramètres comme celui-ci
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)
});
}
}
N'oubliez pas de lier la méthode dans le constructeur. Laissez-moi savoir si vous avez besoin de plus d'aide dans ce domaine.