虽然题目说是angular的，但是其实js，和vue的也可以用，因为之前学angular的时候，那时候还不太熟js，网上关于上传文件的东西找了很久，很难受，所以为了方便初学者，现在自己也写一篇用angular上传文件的文章。

html文件上就不搞那些花里胡哨的东西了

• html

<input type="file" id="file" (change)="getfiledata($event)" multiple>
<button id="uploadfile" (click)="postfile()">点击上传</button>

上面input后面的multiple是可以上传多个文件的属性，加不加随你，不加就每次就只能选一张图片或文件，标签的id可以随便取，后面的ts文件会用到。

• compon.ts文件

export class UploadFileComponent implements OnInit {

  constructor(private api: UploadFileService) { }

  public filesdata: Filedata[] = []
  public alarm: string[] = []
  public fileBase64: string
  public fileBinary: string
  reader = new FileReader()

  ngOnInit() {
  }

    getfiledata(event) {
    this.filesdata=[]
     this.alarm = []
     var getfile = <HTMLInputElement>document.getElementById('file')  //获取html文件上id为“file”的input标签的值
     
     for (var i = 0; i < getfile.files.length; i++) {
      this.transformFile(getfile.files[i])
     }
     console.log(this.fileBase64)  //可以在浏览器上看到文件转成的base64编码
 }


 transformFile(getfile: any) {
  let reader = new FileReader();
  reader.readAsDataURL(getfile);
  reader.onload = () => {
    this.fileBase64 = <string>reader.result  //读取该文件base64编码
    this.fileBinary = atob(this.fileBase64.substring(this.fileBase64.indexOf(',') + 1))//将base64转为二进制编码
    let data = {
      fileName: getfile.name,
      fileBinary: this.fileBinary,
      fileBase64: this.fileBase64
    }
    this.filesdata.push(data)   
  }
}

  public postfile() {            // 传递选中的标题回服务器    
     this.api.postimage(this.filesdata).subscribe(() => { });
  }
}

很多人喜欢将http请求直接写在component.ts文件里面，但这样是不标准的，在angular官方文档里，这些服务都是分开写的，要写在特定的service.ts文件里，具体怎么创建service我就不讲了

• service.ts

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Observable } from 'rxjs';
import { Filedata } from './filedata'

const httpOptions = {
  headers: new HttpHeaders({'Content-Type': 'application/json'})
};

@Injectable({
  providedIn: 'root'
})

export class UploadFileService {

  constructor(private http: HttpClient) { }

  public postimage(file: Filedata[]): Observable<Filedata> {
    return this.http.post<Filedata>('http://localhost:7080/file',
   file, httpOptions);
  }
}

因为我传回去的是个结构体，里面包含文件名称，文件的base64编码和二进制编码，所以还要定义个结构体，当然标准写法也是要在新建个文件，然后就写这么个结构体。

• filedata.ts

export interface Filedata {
    fileName  : string
    fileBinary: string
    fileBase64: string
}

提示

因为上面component.ts文件没有引用，你根据你自己的文件位置去引用（import 。。。。。）service文件和filedata文件