html代碼:
? ? ? ? ? ? ? ? ? ? ? ? <div>
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?<input type="text" nz-input name="singles" [(ngModel)]="singleFile"> //singleFile綁定的就是file的name
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?<label for="file">Upload file</label>
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?<input id="file" #file type="file" multiple (change)="upload(file)" />
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? //<span *ngIf="uploadProgress > 0 && uploadProgress < 100">
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?// {{uploadProgress}}%?
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? //</span>
? ? ? ? ? ? ? ? ? ? ? ? ? </div>
ts代碼:
//聲明
?uploadProgress: any;
? singleFile = [];
? // 上傳多個
? upload(file: HTMLInputElement) {
? ? // const token = localStorage.getItem('token');
? ? let headers: HttpHeaders = new HttpHeaders();
? ? // headers = headers
? ? //? .set('Cache-Control', 'no-cache')
? ? //? .set('Authorization', 'Bearer ' + token);
? ? if (file.value.length === 0) {
? ? ? return;
? ? }
? ? const files: FileList = file.files;
? ? const fileLength = files.length;
? ? const formData: FormData = new FormData();
? ? for (let index = 0; index < fileLength; index++) {
? ? ? // 多個file
? ? ? const singleFile = files.item(index);
? ? ? // files 這個名字和spring mvc controller參數(shù)的名字要對應
? ? ? formData.append('upfile', singleFile);
? ? ? this.singleFile.push(singleFile.name);
? ? }
? ? formData.append('filecategory', 'grSupportant');
? ? // for (let singleFile of files.item) {
? ? //? formData.append(singleFile.name, singleFile);
? ? // }
? ? // formData.append('file', file.files[0]);
? ? const url = 'http://localhost:8764/api/v1/user/fileUpload';
? ? // const req = new HttpRequest('POST', url, formData, {
? ? //? reportProgress: true, headers: headers
? ? // });
? ? // this.http.request(req).subscribe(event => {
? ? //? if (event.type === HttpEventType.UploadProgress) {
? ? //? ? this.uploadProgress = Math.round(100 * event.loaded / event.total);
? ? //? } else if (event instanceof HttpResponse) {
? ? //? ? console.log('Files uploaded!');
? ? //? ? this.singleFile = [...this.singleFile];
? ? //? ? console.log(this.singleFile);
? ? //? }
? ? // });
? ? this.http.post(url, formData, { headers: headers }).subscribe(data => {
? ? ? console.log(data);
? ? ? if (data['code'] == 0) {
? ? ? ? this.singleFile = [...this.singleFile];
? ? ? }
? ? });
? }