Cuando rizo algo, funciona bien:
curl -L -i -H 'x-device-id: abc' -F "url=http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" http://example.com/upload¿Cómo hago para que esto funcione bien con axios? Estoy usando reaccionar si eso importa:
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) }Esto no funciona por alguna razón.
Así es como hago la carga de archivos en reaccionar usando 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 SimpleReactFileUploadSi está enviando datos alfanuméricos, intente cambiar
'Content-Type': 'multipart/form-data'para
'Content-Type': 'application/x-www-form-urlencoded'Si está enviando datos no alfanuméricos, intente eliminar 'Tipo de contenido'.
Si aún no funciona, considere probar la promesa de solicitud (al menos para probar si realmente es un problema de axios o no)
está bien. Intenté las dos formas anteriores pero no funcionó para mí. Después de prueba y error, me di cuenta de que en realidad el archivo no se guardaba en la variable 'this.state.file'.
fileUpload = (e) => { let data = e.target.files if(e.target.files[0]!=null){ this.props.UserAction.fileUpload(data[0], this.fallBackMethod) } }aquí fileUpload es un archivo js diferente que acepta dos parámetros como este
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) }); }}
no olvide vincular el método en el constructor. Avísame si necesitas más ayuda en esto.