javascript - type - axios vue

¿Cómo configuro multipart en axios con react?

Question

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.

Answer 1

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 SimpleReactFileUpload

Source

Answer 2

Okay. Intenté las dos formas anteriores, pero no funcionó para mí. Después de la prueba y error, llegué a saber 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 olvides vincular el método en el constructor. Avísame si necesitas más ayuda en esto.

Answer 3

Si está enviando datos alfanuméricos, intente cambiar

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

a

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

Si está enviando datos no alfanuméricos, intente eliminar ''Content-Type''.

Si todavía no funciona, considere probar request-promise (al menos para probar si realmente es un problema axios o no)