J'essaie de télécharger une image et d'envoyer le formData au backend.

J'utilise formData.append pour ajouter le uploadFile et fetchAPI pour envoyer le formData.

Mon entrée ressemble à ci-dessous

<input style="display:none" type="file"
                               (change)="fileChange($event)"
                               #fileInput>
fileChange(event) {
    let fileList: FileList = event.target.files;
    if (fileList.length > 0) {
      let file: File = fileList[0];
      let formData: FormData = new FormData();
    formData.append('uploadFile', file, file.name);
    console.log('formData', formData);
    this.handleUpload(formData);
    }
  }
handleUpload(formData) {
    const url = `/upload?`;
    let result;
    const req = new Request(proxyurl + url,
      {
        method: 'POST',
        headers: {
          'content-type': 'multipart/form-data; boundary=----WebKitFormBoundary7MA4YWxkTrZu0gW'
    },
        body: formData
      });
    fetch(req)
      .then(response => response.text())
      .then(() => {
        if (result.data) {
          console.log('response ', result.data);
        } else {
          console.log('request failed');
        }
      })
      .catch(() => console.log('Can\'t access ' + url + ' response. Blocked by browser?'));
  }

Lorsque j'accède au service, j'obtiens le code d'état: 422 Entité non traitable avec la réponse ci-dessous

{"error":{"message":"?exception.illegalargument?"}}

La charge utile de demande est comme ci-dessous

------WebKitFormBoundary8E02ll3T0mo433bu
Content-Disposition: form-data; name="uploadFile"; filename="Screen Shot 2019-10-04 at 10.49.34 AM.png"
Content-Type: image/png


------WebKitFormBoundary8E02ll3T0mo433bu--

S'il vous plaît, aidez-moi à faire en sorte que cela fonctionne.

0
aki 8 nov. 2019 à 01:51

1 réponse

Je l'ai fait fonctionner en faisant ce qui suit:

supprimé les en-têtes et vérifié si le serveur attend uploadFile.

code de travail ci-dessous:

  fileChange(event) {
    let fileList: FileList = event.target.files;
    if (fileList.length > 0) {
      let file: File = fileList[0];
      let formData: FormData = new FormData();
      formData.append('uploadedFile', file, file.name);
      this.handleUpload(formData);
    }
  }

  handleUpload(formData) {
    const url = `/upload?`;
    let result;
    const req = new Request(url,
      {
        method: 'POST',
        headers: {},
        body: formData
      });
    fetch(req)
      .then(response => response.text())
      .then(() => {
        if (result.data) {
          console.log('response data ', result.data);
        } else {
          console.log('request failed');
        }
      })
      .catch(() => console.log('Can\'t access ' + url + ' response. Blocked by browser?'));
  }
0
aki 8 nov. 2019 à 01:09