angular2 ng2-file-upload上传示例代码

2023-09-08 17:38:05 309

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/

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

angular2 ng2-file-upload上传示例代码

热门推荐

随机推荐