美文网首页
angular 2+ 的文件上传插件 ng2-file-uplo

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

作者: 曼珠沙华_521b | 来源:发表于2019-06-17 18:31 被阅读0次

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

    HTML:

        <input accept=".pdf" class="fill" type="file" *ngIf="uploader.queue.length==0" ng2FileSelect [uploader]="iploader" title="" (change)="selects($event)" style="position:absolute;top:2px;left:5px;opacity:0;width:88px">
    
    
    *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 {
                //其他错误处理
              }
            }
          }
        });
      }
    
    
    

    相关文章

      网友评论

          本文标题:angular 2+ 的文件上传插件 ng2-file-uplo

          本文链接:https://www.haomeiwen.com/subject/ewdzfctx.html