Ошибка 500 на сервере

Я пытаюсь отправить excell с Angular2 на сервер SpringBoot, но получаю ошибку 500:

HTML:

    <form #fileLoad = "ngForm" (ngSubmit) = "addExcell()">
      <input type = "file" id = "file" name = "file"  class = "form-control" (change) = "fileChange($event)"  accept = ".xlsx">
      <button class = "btn btn-sm btn-outline btn-block">Add</button>
    </form>             

Then I select a File.xlsx



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

Я нажимаю Добавить

  addExcell() {
    const url = "http://localhost:8080/ml/insert";
    this.service.sendFile(url, this.formData).subscribe(data => {
        console.info(data);
      }
    );
  }

В моем сервисе я настраиваю заголовки и отправляю в SpringBoot

sendFile(url, myFile) {
    let headers = new Headers();
    headers.append('Content-Type', 'multipart/form-data');
    headers.append('Accept', 'application/json');

    return this.http2.post(url,   myFile , { headers: headers });
  }

Наконец, в моем SpringBoot:

@RestController
@RequestMapping(value = { "/ml" })
@CrossOrigin
public class MyFile{

        @RequestMapping(method = RequestMethod.POST, value = "/insert" , headers = "Content-Type= multipart/form-data", produces = MediaType.APPLICATION_JSON_VALUE)
        @ResponseBody
        public String insert(@RequestBody MultipartFile multipart) {

            System.out.println("file" + multipart);
            return "SpringBoot";

        }
}

Наконец я получаю ошибку в HTML:

Ошибка 500 на сервере

В моем SpringBoot вы получаете:

org.apache.tomcat.util.http.fileupload.FileUploadException: the request was rejected because no multipart boundary was found
    at org.apache.tomcat.util.http.fileupload.FileUploadBase$FileItemIteratorImpl.<init>(FileUploadBase.java:831) ~[tomcat-embed-core-8.5.27.jar:8.5.27]
    at org.apache.tomcat.util.http.fileupload.FileUploadBase.getItemIterator(FileUploadBase.java:256) ~[tomcat-embed-core-8.5.27.jar:8.5.27]
    at org.apache.tomcat.util.http.fileupload.FileUploadBase.parseRequest(FileUploadBase.java:280) ~[tomcat-embed-core-8.5.27.jar:8.5.27]
    at org.apache.catalina.connector.Request.parseParts(Request.java:2869) ~[tomcat-embed-core-8.5.27.jar:8.5.27]
    at org.apache.catalina.connector.Request.parseParameters(Request.java:3216) ~[tomcat-embed-core-8.5.27.jar:8.5.27]
    at org.apache.catalina.connector.Request.getParameter(Request.java:1137) ~[tomcat-embed-core-8.5.27.jar:8.5.27]
    at org.apache.catalina.connector.RequestFacade.getParameter(RequestFacade.java:381) ~[tomcat-embed-core-8.5.27.jar:8.5.27]
    at org.springframework.web.filter.HiddenHttpMethodFilter.doFilterInternal(HiddenHttpMethodFilter.java:75) ~[spring-web-4.3.14.RELEASE.jar:4.3.14.RELEASE]
    at org.springframework.web.filter.OncePerRequestFilter.doFilter(OncePerRequestFilter.java:107) ~[spring-web-4.3.14.RELEASE.jar:4.3.14.RELEASE]
    at org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(ApplicationFilterChain.java:193) ~[tomcat-embed-core-8.5.27.jar:8.5.27]
    at org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationFilterChain.java:166) ~[tomcat-embed-core-8.5.27.jar:8.5.27]
    at org.springframework.web.filter.CharacterEncodingFilter.doFilterInternal(CharacterEncodingFilter.java:197) ~[spring-web-4.3.14.RELEASE.jar:4.3.14.RELEASE]
    at org.springframework.web.filter.OncePerRequestFilter.doFilter(OncePerRequestFilter.java:107) ~[spring-web-4.3.14.RELEASE.jar:4.3.14.RELEASE]
    at org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(ApplicationFilterChain.java:193) ~[tomcat-embed-core-8.5.27.jar:8.5.27]
    at org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationFilterChain.java:166) ~[tomcat-embed-core-8.5.27.jar:8.5.27]
    at org.apache.catalina.core.StandardWrapperValve.invoke(StandardWrapperValve.java:199) ~[tomcat-embed-core-8.5.27.jar:8.5.27]
    at org.apache.catalina.core.StandardContextValve.invoke(StandardContextValve.java:96) [tomcat-embed-core-8.5.27.jar:8.5.27]
    at org.apache.catalina.authenticator.AuthenticatorBase.invoke(AuthenticatorBase.java:504) [tomcat-embed-core-8.5.27.jar:8.5.27]
    at org.apache.catalina.core.StandardHostValve.invoke(StandardHostValve.java:140) [tomcat-embed-core-8.5.27.jar:8.5.27]
    at org.apache.catalina.valves.ErrorReportValve.invoke(ErrorReportValve.java:81) [tomcat-embed-core-8.5.27.jar:8.5.27]
    at org.apache.catalina.core.StandardEngineValve.invoke(StandardEngineValve.java:87) [tomcat-embed-core-8.5.27.jar:8.5.27]
    at org.apache.catalina.connector.CoyoteAdapter.service(CoyoteAdapter.java:342) [tomcat-embed-core-8.5.27.jar:8.5.27]
    at org.apache.coyote.http11.Http11Processor.service(Http11Processor.java:803) [tomcat-embed-core-8.5.27.jar:8.5.27]
    at org.apache.coyote.AbstractProcessorLight.process(AbstractProcessorLight.java:66) [tomcat-embed-core-8.5.27.jar:8.5.27]
    at org.apache.coyote.AbstractProtocol$ConnectionHandler.process(AbstractProtocol.java:790) [tomcat-embed-core-8.5.27.jar:8.5.27]
    at org.apache.tomcat.util.net.NioEndpoint$SocketProcessor.doRun(NioEndpoint.java:1459) [tomcat-embed-core-8.5.27.jar:8.5.27]
    at org.apache.tomcat.util.net.SocketProcessorBase.run(SocketProcessorBase.java:49) [tomcat-embed-core-8.5.27.jar:8.5.27]
    at java.util.concurrent.ThreadPoolExecutor.runWorker(Unknown Source) [na:1.8.0_171]
    at java.util.concurrent.ThreadPoolExecutor$Worker.run(Unknown Source) [na:1.8.0_171]
    at org.apache.tomcat.util.threads.TaskThread$WrappingRunnable.run(TaskThread.java:61) [tomcat-embed-core-8.5.27.jar:8.5.27]
    at java.lang.Thread.run(Unknown Source) [na:1.8.0_171]

Но у меня есть заголовки = "Content-Type = multipart / form-data" в моем Angular и в моем SpringBoot, я не понимаю, почему у меня эта ошибка.

У вас активировано межсайтовое происхождение? Используйте @CrossOrigin (origins = "domain.try ") в вашем контроллере. Или воспользуйтесь расширением Chrome для обхода.

Sam 13.07.2018 14:36

да, у меня есть RestController - RequestMapping (value = {"/ ml"}) --CrossOrigin

EduBw 13.07.2018 14:40

Попробуйте указать конкретный домен, который будет выполнять запрос, и maxAge для времени истечения срока действия кеша. @CrossOrigin (origins = {"локальный: 8080"}, maxAge = 3000). Измените порт, если ваш клиент использует другой.

Sam 13.07.2018 14:43

Привет, Сэм, я изменил @CrossOrigin (maxAge = 3000) и получаю ту же ошибку.

EduBw 13.07.2018 14:45

Проверьте имена переменных: сначала "file", а затем "myFile". Если это верно, попробуйте передать как @RequestParam ("myFile")

Sam 13.07.2018 14:52

Я сделал console.info в service.ts myFile, который я получил - >> FormData {ƒ append () arguments: [Exception: TypeError: свойства 'вызывающий', 'вызываемый' и 'аргументы' не могут быть доступны для функций строгого режима или объекты аргументов для их вызовов в Function.remoteFunction (<anonymous>: 2: 14)]}

EduBw 13.07.2018 14:55
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Angular и React для вашего проекта веб-разработки?
Angular и React для вашего проекта веб-разработки?
Когда дело доходит до веб-разработки, выбор правильного front-end фреймворка имеет решающее значение. Angular и React - два самых популярных...
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Мы провели Twitter Space, обсудив несколько проблем, связанных с последними дополнениями в Angular. Также прошла Angular Tiny Conf с 25 докладами.
Угловой продивер
Угловой продивер
Оригинал этой статьи на турецком языке. ChatGPT используется только для перевода на английский язык.
Мое недавнее углубление в Angular
Мое недавнее углубление в Angular
Недавно я провел некоторое время, изучая фреймворк Angular, и я хотел поделиться своим опытом со всеми вами. Как человек, который любит глубоко...
Освоение Observables и Subjects в Rxjs:
Освоение Observables и Subjects в Rxjs:
Давайте начнем с основ и постепенно перейдем к более продвинутым концепциям в RxJS в Angular
0
6
76
1

Ответы 1

Вы должны использовать @RequestParam вместо @RequestBody.

@RestController
@RequestMapping("/ml")
public class UploadController {

   @PostMapping("/insert")
   public String uploadFileForm(@RequestParam("uploadFile") MultipartFile file) {
      return file.getOriginalFilename();
   }

}

Другие вопросы по теме