Загрузить файл с данными JSON в Angular5 и Spring Boot - PullRequest
Новая
       63

Загрузить файл с данными JSON в Angular5 и Spring Boot

0 голосов
/ 06 ноября 2018

Я застрял в получении запроса на моем контроллере REST. Ниже мой метод Контроллера: 

@RestController
@CrossOrigin(origins = "http://localhost:4200", allowedHeaders = "*")
public class UserController {

@Autowired
    public UserService userService;

    @PostMapping(value = "/fileUploadApi",  consumes = MediaType.MULTIPART_FORM_DATA_VALUE)
    public @ResponseBody StatusUpload fileUpload(@RequestPart("uploadfile") MultipartFile file, @RequestPart("user") User userDto) throws Exception{
        StatusUpload status= new StatusUpload();
        status = userService.callUserServiceForFileRead(file, userDto);
        return status;
    }

В ApplicationConfig.java я добавил следующее: 

@Bean
     public MultipartResolver multipartResolver() {
         CommonsMultipartResolver multipartResolver = new CommonsMultipartResolver();
         multipartResolver.setMaxUploadSize(500000000);
         return multipartResolver;
     }

Ниже приведен код, который я написал для загрузки файла в конце Angular5:

HTML: 

    <!-- Other form elements -->
    <!-- Used PrimeNG Custom Upload Handler to get the File Object https://www.primefaces.org/primeng/#/fileupload -->
        <label>Upload template </label>
          <p-fileUpload (uploadHandler)="getFile($event)" auto="true" customUpload="true"  accept=".xlsx,application/msexcel"  previewWidth="0" [showUploadButton]="false" [showCancelButton]="false">
          </p-fileUpload>
<!-- Form Submit Button -->
<button type="button" (click)="submit()">SUBMIT</button>

КОМПОНЕНТ: 

    user: User = new User;
// Set other form element data in user object.
    uploadFile: File;
    getFile(event) {
        this.uploadfile= event.files[0];
      }
submit() {
    this.userService.saveUserData(this.user,this.uploadFile);

  }

СЕРВИС: 

options = {
    headers: new HttpHeaders({  'Content-Type': ''  })
  };
constructor(private http: HttpClient) { }
    saveUserData(user:User, uploadFile:File){
    var formData: FormData = new FormData();
    formData.append('user',JSON.stringify(user));
    formData.append('uploadfile',uploadFile);
    return this.http.post<StatusUpload>(baseUrl + "/fileUploadApi", formData, this.options);
    }

Когда я пользуюсь вышеуказанным Сервисом, он не дает мне никакого ответа / Исключения не знаю, почему. Запрос даже не дошел до моего RESTController. Я прочитал другой подход в некотором посте и использовал его, как показано ниже: 

saveUserData(user: User, uploadFile: File) {
var formData: FormData = new FormData();
Observable.fromPromise(new Promise((resolve, reject) => {
  let xhr = new XMLHttpRequest();
  formData.append('user', new Blob([JSON.stringify(user)],
    {
      type: "application/json"
    }));
  formData.append('uploadfile', uploadFile);
  xhr.open("POST", baseUrl + "/fileUploadApi", true);
  xhr.send(formData);
}));
}

С учетом вышеизложенного я получаю org.springframework.web.multipart.support.MissingServletRequestPartException.

Может кто-нибудь помочь, чтобы этот код работал. Мне нужно использовать http.post () в моей службе Angular, а не XMLHttpRequest.send ().

Ответы [ 2 ]

0 голосов
/ 06 ноября 2018

Нужно подписаться на наблюдаемое.

Метод HttpClient не начинает свой HTTP-запрос до тех пор, пока вы не вызовете subscribe () для наблюдаемой, возвращаемой этим методом. Это верно для всех методов HttpClient.

Docs

0 голосов
/ 06 ноября 2018

Вы можете попробовать этот способ, используя @RequestParam. 

@PostMapping("/uploadFile")
public UploadFileResponse uploadFile(@RequestParam("file") MultipartFile file) {
    String fileName = fileStorageService.storeFile(file);

    String fileDownloadUri = ServletUriComponentsBuilder.fromCurrentContextPath()
            .path("/downloadFile/")
            .path(fileName)
            .toUriString();

    return new UploadFileResponse(fileName, fileDownloadUri,
            file.getContentType(), file.getSize());
}

Детали: https://www.callicoder.com/spring-boot-file-upload-download-rest-api-example/

...