angular 2+ 的文件上传插件 ng2-file-upload

需求:使用angular 6 上传文件，文件为pdf格式，单个文件不超过10m，且文件不能重复，且文件名最长50位,点击进来时就筛选pdf文件，其他格式文件过滤

HTML:

    


*ngIf="uploader.queue.length==0"是解决文件名不能重复的问题，
accept 是html的自带的，是过滤pdf格式文件

文件上传按钮

TS:

首先导入模块，导入到app.module，后者拆分模块都可以，拆分模块指针当前拆分模块有效
import { FileUploadModule} from " ng2-file-upload";
@NgModule({
imports:[
...
FileUploadModule
...
]
)

在当前文件下，引入
import{FileUploader, ParsedResponseHeaders} from"ng2-file-upload";

uploader: FileUploader=new FileIUploader({
url:url,//url
itemAlias:"file"，
isHTML5:true,
removeAfterUpload:true,
additionalParameter：{
token:'token',//token值
 }
})
 selects(e) {
    if (e.target.files[0].size >= 10485760) {
      //解决的是大于10m文件
      //.....
      this.uploader.clearQueue();//清除fileuplaoder上传队列的文件
    } else {
      //...
      this.data = {
        user_no: user_nom,//用户名
        file_no: file - no,//文件名
        token: token //token值
      }
      this.uploader, setOptions({
        additionalParameter: this.data
      })
      let name = e.target.files['0']['name'];//被选中的文件名称

      if (this.uploadArr.length >= 1) {

        for (const key in this.uploadArr) {
          if (this.uploadArr.hasOwnPeoperty(key)) {

            const element = this.uploadArr[key];
            if (element['fileName'] != name) {
              this.uploaders();//文件上传没有问题时
            } else {
              this.uploader.clearQueue();//清除fileuplaoder的上唇队列
            }
          }
        }else if (this.uplaodArr.length == 0) {
          this.uploaders()
        }

      }

    }
  }
 uploaders() {

    this.uploaders.queue.forEach(queue => {
      queue.withCredentials = false;
      queue.error = (response: string, status: number, header: ParsedResponseHeader) => {
        //上传服务器出错
      };
      queue.onSuccess = (response, status, heders) => {
        if (status == 200) {
          let res = JSON.parse(response);
          let maxsize.respHeader.error_code;
          if (maxsize == "resp_0000") {
            this.reqNumber = res.respBody.reqNo;
            let files = Number(res.respBody.fileSize / 1024);//体积大小
            files >= 1000 ? this.fileSize = (files / 1024).toFixed(2) + 'M' : this.fileSize = files.toFixed(2) + 'k';
            this.uploadArr.push({ 'name': res.respBody.fileName, 'fileSize': this.files })
          } else if (maxsize == "P0007") {
            //文件上传失败
          } else {
            //其他错误处理
          }
        }
      }
    });
  }