Question

我正面临使用Angular 4的多台文件上载的问题。

在此,我试图在收集详细资料时附上多份档案,但只有卷宗正在选择,如果我选择另一份档案,则要用新的档案取而代之,但<明确>实际期望,即它们需要相互支持,并且使用我需要通过json的海报方法。

页: 1

    <div>
      <h1>{{title}}!</h1>
    <ng-container>
          <input type="file" id="file" multiple (change)="getFileDetails($event)">
           <button (click)="uploadFiles()">Upload</button>
      </ng-container>
    </div

页: 1

import { Component, OnInit } from  @angular/core ;
import { HttpClient } from  @angular/common/http ;
import { HttpErrorResponse } from  @angular/common/http/src/response ;

@Component({
  selector:  app-root ,
  templateUrl:  ./app.component.html ,
  styleUrls: [ ./app.component.css ]
})
export class AppComponent {
  title =  Upload Multiple Files in Angular 4 ;

  constructor (private httpService: HttpClient) {  }


  ngOnInit () {  }
  myFiles:string [] = [];
  sMsg:string =   ;

  getFileDetails (e) {
    //console.log (e.target.files);
    for (var i = 0; i < e.target.files.length; i++) { 
      this.myFiles.push(e.target.files[i]);
    }
  }

  uploadFiles () {
    const frmData = new FormData();

    for (var i = 0; i < this.myFiles.length; i++) { 
      frmData.append("fileUpload", this.myFiles[i]);
    }

    this.httpService.post( url , frmData).subscribe(
      data => {
        // SHOW A MESSAGE RECEIVED FROM THE WEB API.
        this.sMsg = data as string;
        console.log (this.sMsg);
      },
      (err: HttpErrorResponse) => {
        console.log (err.message);    // SHOW ERRORS IF ANY.
      }
    );
  }
}
}

页: 1

import { BrowserModule } from  @angular/platform-browser ;
import { NgModule } from  @angular/core ;
import { AppComponent } from  ./app.component ;

import { HttpClientModule } from  @angular/common/http ;

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

预期json:

[{
   "attachmentName": "content-infographic.txt",
   "attachedFile": ""
},
{
  "attachmentName": "infographic.png",
   "attachedFile": ""
}]

我如何纠正该法典以解决这个问题?

Answer 1

我将下文用在PHP的APIC中,使附录的第一个参数成为阵列。替换为:

frmData.append("fileUpload[]", this.myFiles[i]);

唯一的改动是增加的方括号。

Answer 2

在将档案上载到服务器之前,自动改名为档案,使用以下代码:

var d = new Date();
var msec = Date.parse(d);
for (var i = 0; i < this.myFiles.length; i++) { 
   frmData.append("fileUpload", this.myFiles[i], this.myFiles[i].name + msec);
}

友情链接