如何使用Angular 6,Express和Multer制作多个文件上传系统?

时间:2019-01-16 05:01:02

标签: javascript html angular multer

我试图使它像这样Multiple files upload with Angular 2, Express and multer  ,问题是我想同时发送多个值

我不知道该怎么做。 有更好的选择吗?

gallery.component.html

          <form  id="file-catcher">
        <input type="file" id='file-input' name="file" multiple (change)="change($event)">
        <input class="ml-2" type="text" id="name" name='name' value="name">
        <input class="ml-2" type="text" id="detail" name='detail' value="detail">
        <input class="ml-2" type="date" id="date" name='date' value="date">
        <input class="ml-2" type="submit" value="upload" (click)='submit($event)'>
    </form>

gallery.component.ts

 public fileList = [];

  public change(event) {
    var fileInput = <HTMLInputElement>document.getElementById('file-input')
    this.fileList = [];

    console.log(fileInput)
    for (var i = 0; i < fileInput.files.length; i++) {
      this.fileList.push(fileInput.files[i])
      console.log(this.fileList, i)
    }
  }

  public submit (evnt) {
    let name = $('#name').val;
    let  detail = $('#detail').val;
    let date = $('#date').val;
    alert('ok')
    let self = this
    this.fileList.forEach(function (file) {
      self.__appserverservice.uploadGallery(file, name, detail, date)
    })
  }

__ appserverservice => appserver.service.ts

  uploadGallery(file: File, name: String, detail: String, date: Date) : Observable<HttpEvent<any>> {
    let formData = new FormData();
    formData.append('upload', file);

    const req = new HttpRequest('POST', myUrl, formData, );
    return this.http.request(req);
  }

我由邮递员发送数据,我必须像这样在mongodb中收集数据库。 enter image description here

0 个答案:

没有答案