Angular4上传文件中ng2-file-upload 使用方法

发布时间：2019-11-01 17:02:09 修改时间：2019-11-01 17:02:09 阅读：6880 评论：0 0

使用方法：

第一步：安装 ng2-file-upload

npm install ng2-file-upload --save 




 第二步：在需要使用该插件的页面的对应module文件的imports中引入CommonModule  和  FileUploadModule

@NgModule({

imports:[

...

FileUploadModule

...

]

)

第三步：在对应的组件文件中引入并声明；

import { FileUploadModule} from " ng2-file-upload";




public uploader: FileUploader = new FileUploader({

        authToken: 'Bearer ' + localStorage.getItem('id_token'),

        url: systemconst.api_url + 'device/UploadFile',

        additionalParameter:{

            token:'token',//token值

        }

    });







插件方法：

一、获取文件流：

1、可以在fileItem中获取到。

this.uploader.onBuildItemForm=function(fileItem,form){

      form.append('name',fileItem.file.name);

      form.append('name',fileItem.file.size);

}

2、自定义传ID或者文件外其他值

this.uploader.setOptions({additionalParameter:{'id':this.id}}) 

注：使用此方法头部token需要设置header加参数 否则直接写入authToken参数就可传token

二、上传

this.uploader.queue[i].upload(); upload()。

注：批量上传就是调多次的单个上传方法。




三、上传时加消息头(加token值)

格式： 

1、headers : [{name:"Authorization",value:this.token}]

2、authToken: this.token,




四、队列操作

1、移除上传的列队

this.uploader.clearQueue();

2、添加上传队列

 this.uploader.addToQueue(files);

---