Загрузите zip-файл в контроллер пружинного упора с помощью angular 4

Я хочу загрузить файл .zip на сервер (контроллер пружинного упора) из angular 4. Подскажите, пожалуйста, как это сделать?

заранее спасибо

Тестирование функциональных 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
3
0
4 883
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

1) Посмотрите здесь: https://angular.io/guide/http#making-a-post-request

Таким образом, вы можете создать службу, которая запускается, когда вы нажимаете кнопку отправки в форме, которая прикрепляет файл, что бы это ни было, zip, img или что-то еще, к запросу POST.

2) В своем шаблоне вы можете использовать что-то подобное:

<form>
  <input type = "file" accept = ".zip,application/octet-stream,application/zip,application/x-zip,application/x-zip-compressed">
  <input type = "submit">
</form>

3) Посмотрите здесь, чтобы принудительно расширить файл: https://www.hongkiat.com/blog/css3-attribute-selector/

Спасибо, очень полезный ответ

Atul 22.05.2018 11:37
Ответ принят как подходящий

После некоторого обучения я нашел ответ на вопрос, как загрузить файл (.zip / .txt / любой другой формат файла) из angular (4/5) в контроллер spring / rest. Записываю свое обучение ниже для тех, кто ищет то же самое. :)

Front-end кодирование:

1. HTML (например, UploadFile.component.html):

<input type = "file" formControlName = "uploadFile" (change) = "uploadFileToServer($event)"/>

2. Компонент (например, UploadFile.component.ts):

import { Component } from '@angular/core';
import { RequestOptions, Headers, Http } from '@angular/http';
@Component({
  selector: 'file-uploader',
  templateUrl: './uploadFile.component.html',
  styleUrls: ['./uploadFile.component.css'],
})
export class FileUploadComponent {

public uploadFileToServer(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);
    formData.append('fileType', 'zip');
    let headers = new Headers();
    headers.append('Accept', 'application/json');
    let options = new RequestOptions({ headers: headers });
    this.http.post('domain/urservice', formData, options)
      .map(res => res.json())
      .catch(error => Observable.throw(error))
      .subscribe(
      data => console.info('success'),
      error => console.info(error)
      )
  }
} 

}

(примечание - этот вызов связи с сервером должен присутствовать в какой-либо службе, а не в компоненте, но для простоты я пишу его в компоненте)

кодирование на стороне сервера ::

1. Контроллер Spring / Rest (FileUploadController.java):

    @RequestMapping(value = "/urservice", method = RequestMethod.POST)
    public void uploadFile(MultipartHttpServletRequest request) throws IOException {

    Iterator<String> itr = request.getFileNames();

    // directory to save file
    String tempDir = System.getProperty("jboss.server.temp.dir");

      MultipartFile file = request.getFile(itr.next());
      String fileType = request.getParameter("fileType");
      String fileName = file.getOriginalFilename();

      File dir = new File(tempDir);
      File fileToImport = null;
      if (dir.isDirectory()) {

        try {
            fileToImport = new File(dir + File.separator + fileName);
            BufferedOutputStream stream = new BufferedOutputStream(new FileOutputStream(fileToImport));
            stream.write(file.getBytes());
            stream.close();
        } catch (Exception e) {
            logger.error("Got error in uploading file.");
        }

}

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