React.js, cómo enviar un multipart/form-data al servidor

Ten en cuenta que en la informática un error casi siempere puede tener diversas resoluciones, no obstante aquí te compartimos lo más óptimo y eficiente.

Solución:

¡Simplemente intentamos eliminar nuestros encabezados y funciona!

fetch("http://localhost:8910/taskCreationController/createStoryTask", 
      mode: 'no-cors',
      method: "POST",
      body: data
    ).then(function (res) 
      if (res.ok) 
        alert("Perfect! ");
       else if (res.status == 401) 
        alert("Oops! ");
      
    , function (e) 
      alert("Error submitting form!");
    );

El archivo también está disponible en el evento:

e.target.files[0]

(elimina la necesidad de document.querySelector('input[type="file"]').files[0];)

uploadAction(e) {
  const data = new FormData();
  const imagedata = e.target.files[0];
  data.append('inputname', imagedata);
  ...

Nota:
Usar console.log(data.get('inputname')) para la depuración, console.log(data) no mostrará los datos adjuntos.

Aquí está mi solución para cargar imágenes con vista previa a través de axios.

import React,  Component  from 'react';
import axios from "axios";

Clase de componente de reacción:

class FileUpload extends Component 

    // API Endpoints
    custom_file_upload_url = `YOUR_API_ENDPOINT_SHOULD_GOES_HERE`;


    constructor(props) 
        super(props);
        this.state = 
            image_file: null,
            image_preview: '',
        
    

    // Image Preview Handler
    handleImagePreview = (e) => 
        let image_as_base64 = URL.createObjectURL(e.target.files[0])
        let image_as_files = e.target.files[0];

        this.setState(
            image_preview: image_as_base64,
            image_file: image_as_files,
        )
    

    // Image/File Submit Handler
    handleSubmitFile = () => 

        if (this.state.image_file !== null)

            let formData = new FormData();
            formData.append('customFile', this.state.image_file);
            // the image field name should be similar to your api endpoint field name
            // in my case here the field name is customFile

            axios.post(
                this.custom_file_upload_url,
                formData,
                
                    headers: 
                        "Authorization": "YOUR_API_AUTHORIZATION_KEY_SHOULD_GOES_HERE_IF_HAVE",
                        "Content-type": "multipart/form-data",
                    ,                    
                
            )
            .then(res => 
                console.log(`Success` + res.data);
            )
            .catch(err => 
                console.log(err);
            )
        
    


    // render from here
    render()  
        return (
            

                /* image preview */
                







                /* image input field */
                
                Upload file
                
            
        );
    


export default FileUpload;

valoraciones y comentarios

Al final de la web puedes encontrar las críticas de otros usuarios, tú todavía tienes la habilidad dejar el tuyo si te apetece.

Utiliza Nuestro Buscador