Angular通过FileReader读取文件上传

首先这里说一下这个方式只适合小文件的上传，并且存在弊端，对于大文件参考我的另一篇博客ng2-file-upload+node.js+express实现文件上传并保存本地
首先前台就是通过file类型的input选择文件

<input type="file" (change)="selectFile($event)" id="inputBox">

然后进行文件读取并上传

  /**
   * 通过FileReader上传
   * @param event 事件对象
   */
  selectFile(event: any) {
    let reader = new FileReader();
    const appThis = this;
    let fileLength: number = event.target.files[0].size;
    let readLength: number = 5120;
    let tempLength: number = 0;

    if (readLength > fileLength) {
      readLength = fileLength;
    }
    else {
      readLength = 5120;
    }
    reader.readAsDataURL(event.target.files[0]);
    reader.onload = function () {

      appThis.httpService.uploadFile(this.result.slice(20, 5120)).subscribe(data => {
        tempLength = readLength;
        if ((fileLength - readLength) > 0) {
          // 如果文件长度小于以5120增长的读取长度，则读取长度等于文件长度，否则读取长度继续增加5120
          if ((fileLength - (readLength + 5120)) < 0) {
            readLength = fileLength;
          }
          else {
            readLength = readLength + 5120;
          }
          reader.readAsDataURL(event.target.files[0].slice(tempLength, readLength));
        }
        console.log(readLength);
      });
    }
    console.log(event.target.files[0].slice(0, 5120));
  }

http服务中编写上传方法，不解释了

  uploadFile(fileData: string | ArrayBuffer): Observable<any> {
    return this.httpService.post<string>("api/", fileData).pipe(
      map((object): string => object, catchError((object): string => object = '0'))
    );
  }

到这里已经完成了文件的读取与上传操作。说一下弊端：
一是只能进行小文件上传，大文件的话上传很慢，当然代码中可以调一次上传的大小，但是我没试太大的，上面例子是一次4k，你知道的，这速度用户会打你的；

二是上传时刻无法控制，你在选完文件的时候就进行了上传，如果最后用户不上传了呢，你会产生多少垃圾文件，如果你把读到的数据拿到外面缓存起来，你考虑如果文件过大的情况吗；

三是对于后台接收的问题，这里进行了文件的切割进行上传，会有粘包的问题，同时要确保后台拿到的顺序，我这里没做处理，如果要处理的话，可以将切割的数据放进一个对象中，同时给对象编顺序号，后台根据进行顺序号进行拼接写入，所以的话后台需要一个牛逼的大佬。

综上三点，文件上传是不建议这么做了