angular2 ng2-file-upload上传示例代码
Angular2中有两个比较好用的上传文件的第三方库,一个是ng2-file-upload,一个是ng2-uploader。ng2-uploader是一个轻便的上传文件的支持库,功能较弱,而ng2-file-upload是一个功能比较全面的上传文件的支持库。这里主要介绍一下ng2-file-upload的使用。
ng2-file-upload文件上传
1、安装ng2-file-upload模块
npminstallng2-file-upload--save
2、如果使用systemjs打包,需要在配置systemjs.config.js文件
A、在System.config的map字段中的最后一行输入以下字段:
'ng2-file-upload':'npm:ng2-file-upload'
B、在System.config的packages字段中的最后一行输入:
'ng2-file-upload':{ main:'index.js', defaultExtension:'js' }
3、在app.module.ts文件中,或者您有多个模块,在需要的模块中引入一下模块
import{CommonModule}from'@angular/common'; import{FileUploadModule}from'ng2-file-upload';
然后在@NgModule的imports字段中引用CommonModule和FileUploadModule。
@NgModule({ imports:[ CommonModule, FileUploadModule ] }
4、在自定义的上传组件中使用ng2-file-upload
import{Component,OnInit}from"@angular/core"; //A:引入FileUpload模块 import{FileUploader}from"ng2-file-upload"; @Component({ selector:"my-file", templateUrl:"./app/file.html" }) exportclassHomeFileComponentimplementsOnInit{ //B:初始化定义uploader变量,用来配置input中的uploader属性 publicuploader:FileUploader=newFileUploader({ url:"http://localhost:3000/ng2/uploadFile", method:"POST", itemAlias:"uploadedfile" }); //C:定义事件,选择文件 selectedFileOnChanged(event:any){ //打印文件选择名称 console.log(event.target.value); } //D:定义事件,上传文件 uploadFile(){ //上传 this.uploader.queue[0].onSuccess=function(response,status,headers){ //上传文件成功 if(status==200){ //上传文件后获取服务器返回的数据 lettempRes=JSON.parse(response); }else{ //上传文件后获取服务器返回的数据错误 alert(""); } }; this.uploader.queue[0].upload();//开始上传 } }
5、对应的html内容
selectedFileOnChanged($event)在.ts文件中定义 selectedFileOnChanged(event:any){ console.log(event.target.value); }
选择文件默认支持选择单个文件,如需支持文件多选,请在标签中添加multiple属性,即:
6、拖拽上传文件
支持多文件拖拽上传
在对应的.ts文件中定义拖拽函数
fileOverBase(event){ //拖拽状态改变的回调函数 } fileDropOver(event){ //文件拖拽完成的回调函数 }7、文件上传
FileUploader有个数组类型的属性queue,里面是所有拖拽的和选择的文件,只要操作这个属性便可以进行文件上传。
uploadFileHandel(){ this.uploader.queue[0].onSuccess=function(response,status,headers){ //上传文件成功 if(status==200){ //上传文件后获取服务器返回的数据 lettempRes=JSON.parse(response); }else{ //上传文件后获取服务器返回的数据错误 } }; this.uploader.queue[0].upload();//开始上传 }详细介绍FileUpload
**初始化配置表**
参数名参数类型是否是可选值参数说明 allowedMimeTypeArray可选值 allowedFileTypeArray 可选值允许上传的文件类型 autoUploadboolean可选值是否自动上传 isHTML5boolean可选值是否是HTML5 filtersArray可选值 headersArray 可选值上传文件的请求头参数 methodstring可选值上传文件的方式 authTokenstring可选值auth验证的token maxFileSizenumber可选值最大可上传文件的大小 queueLimitnumber可选值 removeAfterUploadboolean可选值是否在上传完成后从队列中移除 urlstring可选值上传地址 disableMultipartboolean可选值 itemAliasstring可选值文件标记/别名 authTokenHeaderstring可选值auth验证token的请求头 参考网站:https://valor-software.com/ng2-file-upload/
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。