如何在连续部分的角度中上传带有json数据的多部分文件

时间:2020-06-30 14:32:45

标签: html angular typescript

我正在尝试一个工作页面。我有该页面的快照 here

能否请您帮助我了解如何实施此操作。我无法将值从html文件传递到打字稿。另外,如何将这些文件输入发送到发布

HTML:     <form enctype="multipart/form-data">
    <div class="col-lg-12">
    <div style="border: 1px solid rgb(104, 104, 187); border-radius: 15px; color: black; margin-bottom: 5px; ">
        <div class="ds-col-12" style="margin-top: 10px; margin-left: 10px;">

           <div class="ds-col-3">
                <span style="color: red;" ng-bind="model.subLevelName" value="1.a Security Plan"> 1.a Name </span>
              </div>
              <div class="ds-col-3">
                <mat-form-field appearance="outline">
                    <mat-label>Comments</mat-label>                                    
                    <textarea matInput [(ngModel)]="model.comment" name="comment" cdkTextareaAutosize #autosize="cdkTextareaAutosize"
                     cdkAutosizeMinRows="2" cdkAutosizeMaxRows="5"></textarea> 
                    </mat-form-field>
              </div>
              <div class="ds-col-4">
                <ngx-dropzone (change)="onSelect($event,'security')" class="mat-card" style="vertical-align: bottom;">
                  <ngx-dropzone-label>Upload files here!</ngx-dropzone-label>
                  <ngx-dropzone-preview *ngFor="let f of files_panel1_a" [removable]="true" (removed)="onRemove(f)">
                    <ngx-dropzone-label >{{ f.name }} ({{ f.type }})</ngx-dropzone-label>
                  </ngx-dropzone-preview>
                </ngx-dropzone>
              </div>
              <div class="ds-col-2">
                <button class="ds-button ds-button-primary ds-width-auto ds-small">Download</button>
              </div>            
              <div class="ds-col-3">                   
        <button type="button" class="ds-button ds-button-primary ds-width-auto ds-small"
         name="submit" id="Submit" (click)="uploadFiles(model)">Submit</button>                       
</div>
        </div>       
</div>
</form>

ts file:

uploadFiles(model) {
    var formData = new FormData()
    for (let i = 0; i < this.files.length; i++) {
      formData.append("uploads", this.files[i]);
      const blobOverrides = new Blob([JSON.stringify(model)],
        {
            type: "application/json"
        });
        console.log(blobOverrides)
      formData.append(blobOverrides)
    }
    
    console.log(formData.getAll("uploads"))
    this.upload(formData)
    .subscribe((res)=>{
      console.log(res)
      this.FileName=res[0].FileName
      this.KeyName=res[0].KeyName
    },
    (err)=>{
      console.log(err)
    })
  }

请帮助我了解我必须在哪里更正我的代码。

0 个答案:

没有答案