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

使用方法:

第一步:安装 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);

猜你喜欢

转载自blog.csdn.net/qq_27751965/article/details/103024979