web-dev-qa-db-fra.com

React.js, comment envoyer un multipart / form-data au serveur

Nous voulons envoyer un fichier image en plusieurs parties/formulaire au backend, nous essayons d'utiliser le formulaire html pour obtenir le fichier et envoyer le fichier en tant que formData, voici les codes

export default class Task extends React.Component {

  uploadAction() {
    var data = new FormData();
    var imagedata = document.querySelector('input[type="file"]').files[0];
    data.append("data", imagedata);

    fetch("http://localhost:8910/taskCreationController/createStoryTask", {
      mode: 'no-cors',
      method: "POST",
      headers: {
        "Content-Type": "multipart/form-data"
        "Accept": "application/json",
        "type": "formData"
      },
      body: data
    }).then(function (res) {
      if (res.ok) {
        alert("Perfect! ");
      } else if (res.status == 401) {
        alert("Oops! ");
      }
    }, function (e) {
      alert("Error submitting form!");
    });
  }

  render() {
    return (
        <form encType="multipart/form-data" action="">
          <input type="file" name="fileName" defaultValue="fileName"></input>
          <input type="button" value="upload" onClick={this.uploadAction.bind(this)}></input>
        </form>
    )
  }
}

L'erreur dans le backend est "l'exception imbriquée est org.springframework.web.multipart.MultipartException: impossible d'analyser la demande de servlet en plusieurs parties; l'exception imbriquée est Java.io.IOException: org.Apache.Tomcat. util.http.fileupload.FileUploadException: la demande a été rejetée car aucune limite en plusieurs parties n'a été trouvée ".

Après avoir lu this , nous avons essayé de définir la limite des en-têtes dans fetch:

fetch("http://localhost:8910/taskCreationController/createStoryTask", {
      mode: 'no-cors',
      method: "POST",
      headers: {
        "Content-Type": "multipart/form-data; boundary=AaB03x" +
        "--AaB03x" +
        "Content-Disposition: file" +
        "Content-Type: png" +
        "Content-Transfer-Encoding: binary" +
        "...data... " +
        "--AaB03x--",
        "Accept": "application/json",
        "type": "formData"
      },
      body: data
    }).then(function (res) {
      if (res.ok) {
        alert("Perfect! ");
      } else if (res.status == 401) {
        alert("Oops! ");
      }
    }, function (e) {
      alert("Error submitting form!");
    });
  }

Cette fois, l'erreur dans le backend est: Servlet.service () pour le servlet [dispatcherServlet] dans le contexte avec le chemin [] a levé l'exception [Échec du traitement de la demande; l'exception imbriquée est Java.lang.NullPointerException] avec la cause racine

Ajoutons-nous la frontière à plusieurs parties à droite? Où cela devrait-il être? Peut-être que nous avons tort au début parce que nous n'obtenons pas les données multipart/form. Comment l'obtenir correctement?

reactjsfile-uploadmultipartform-data
13
Peter Jiang

Nous essayons simplement de supprimer nos en-têtes et cela fonctionne!

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!");
    });
9
Peter Jiang

Le fichier est également disponible dans l'événement:

e.target.files[0]

(élimine le besoin de document.querySelector('input[type="file"]').files[0];)

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

Remarque: Utilisez console.log(data.get('inputname')) pour le débogage, console.log(data) n'affichera pas les données ajoutées.

2
Jerimiah Mair

Composant de téléchargement de fichiers React

import { Component } from 'react';

class Upload extends Component {
  constructor() {
    super();
    this.state = {
      image: '',
    }
  }

  handleFileChange = e => {
    this.setState({
      [e.target.name]: e.target.files[0],
    })
  }

  handleSubmit = async e => {
    e.preventDefault();

    const formData = new FormData();
    for (let name in this.state) {
      formData.append(name, this.state[name]);
    }

    await fetch('/api/upload', {
      method: 'POST',
      body: formData,
    });

    alert('done');
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <input 
          name="image" 
          type="file"
          onChange={this.handleFileChange}>
        </input>
        <input type="submit"></input>
      </form>
    )
  }
}

export default Upload;
0
vinfinit