Post MultipartFile - Запрос части не задан Ошибка - PullRequest
Новая
       82

Post MultipartFile - Запрос части не задан Ошибка

3 голосов
/ 25 апреля 2019

Я пытаюсь отправить образ из ionic Front-End приложения через post метод к Back-End сервисам в Spring boot

Я сделал этот метод, который отправляет сообщение на внутренний URL-адрес с изображением внутри объекта FormData: 

  uploadImageService(url: string, image: any) {
     console.log('post service: upload Image', + url);
     // Initiates a FormData object to be sent to the server
     const fd: FormData = new FormData();
     fd.append('file', image);
     const xhr = new XMLHttpRequest;
     console.log('form data file: \n' + fd.get('file'));
     xhr.open('POST', url);
     // Send the FormData
     xhr.send(fd);
     console.log(xhr.response);
     return xhr.responseText;
  }

// call this method:

this.webapiService.uploadImageService(this.globalDataService.getUrlMedium() 'riskcontrol/subir-imagen', this.selectedImage);

Это метод весенней загрузки, который собирает этот пост: 

 @RequestMapping(method = RequestMethod.POST, value = "/subir-imagen")
    public ResponseEntity handleFileUpload(@RequestParam("file") MultipartFile file) {
       LOGGER.log(Level.INFO, "/Post, handleFileUpload", file);     
       String associatedFileURL = fileManagerService.storageFile(file);
       return ResponseEntity.ok(associatedFileURL);
  }

Когда я делаю пост изображения, я получаю это ошибка :

.w.s.m.s.DefaultHandlerExceptionResolver: решено [org.springframework.web.multipart.support.MissingServletRequestPartException: необходимая часть запроса 'file' отсутствует]

Я запустил петицию через Почтальон , и она сработала, вот почему я думаю, что ошибка в коде tyscript.

Единственное различие, которое я вижу между почтальоном и кодом, состоит в том, что в данных формы пусть ключ помечается как файл типа или текст типа, и я выбрал тип файла.

Я попытался сделать запрос постом по-другому: 

const httpOptionsImages = {
  headers: new HttpHeaders({
    'Content-Type': 'multipart/form-data',
    'Access-Control-Allow-Origin': '*',
    'Access-Control-Allow-Methods': 'GET, PUT, POST, DELETE'
  })
};


// function

uploadImageService(url: string, image: any): Observable<any> {
    console.log('post service: upload Image', + url);
    // Initiates a FormData object to be sent to the server
    const fd: FormData = new FormData();
    fd.append('file', image);

    return this.http
        .post(url, fd, httpOptionsImages);
  }


// call to the function

this.webapiService.uploadImageService(this.globalDataService.getUrlMedium() + 'riskcontrol/subir-imagen', this.selectedImage)
        .subscribe( result => {
          console.log(result);
});

Но таким образом я получил еще одну ошибку :

FileUploadException: запрос был отклонен, так как не было найдено многокомпонентной границы

Что я делаю не так? Есть ли способ указать FormData , что ключ имеет тип file как в почтальоне?

Ответы [ 3 ]

2 голосов
/ 01 мая 2019

Добавить изображение как Blob следовать Ионный учебник 

 const imgBlob = new Blob([reader.result], {type: file.type});
  formData.append('file', imgBlob, file.name);

В функции readFile программа использует FileReader из File API для чтения файла в ArrayBuffer. Событие onloadend вызывается, как только файл успешно прочитан. Затем приложение создает объект FormData, оборачивает буфер массива в BLOB-объект и добавляет его в объект FormData с именем «file». Это то же имя, которое сервер ожидает в качестве параметра запроса.

0 голосов
/ 07 мая 2019

Вы пробовали использовать @RequestPart вместо @RequestParam для MultipartFile file.

0 голосов
/ 07 мая 2019

Удалите ваш 'Content-Type': 'multipart / form-data'.

...