标签：can stat 文件上传 shu www. 拖拽 状态码 des ready
Angular2中有两个比较好用的上传文件的第三方库，一个是ng2-file-upload，一个是ng2-uploader。ng2-uploader是一个轻便的上传文件的支持库，功能较弱，而ng2-file-upload是一个功能比较全面的上传文件的支持库。这里主要介绍一下ng2-file-upload的使用。
以下以Mac OS操作系统介绍。
使用npm安装即可。在项目中打开“终端”，运行命令：
sudo npm install ng2-file-upload --save
如果是以systemjs的方式打包，安装完成后需要打开systemjs.config.js文件，在System.config的map字段中的最后一行输入以下字段：
‘ng2-file-upload‘: ‘npm:ng2-file-upload‘
在System.config的packages字段中的最后一行输入：
‘ng2-file-upload‘: {
main: ‘index.js‘,
defaultExtension: ‘js‘
}
之后便可以在项目中使用了。
在需要用到的模块中引用模块：
import { CommonModule } from ‘@angular/common‘;
import { FileUploadModule } from ‘ng2-file-upload‘;
然后在@NgModule的imports字段中引用CommonModule和FileUploadModule。
在对应需要使用的组件内引用：
import { FileUploader } from ‘ng2-file-upload‘;
初始化FileUploader：
uploader:FileUploader = new FileUploader({
url: "http://www.download.com:80/uploadFile",
method: "POST",
itemAlias: "uploadedfile"
});
初始化FileUploader需要传入FileUploaderOptions类型的参数：
| 参数名 | 参数类型 | 是否是可选值 | 参数说明 |
|:---- --:|:--------:|:-------------:|:--------:|
| allowedMimeType | Array<string> | 可选值 | |
| allowedFileType | Array<string> | 可选值 | 允许上传的文件类型 |
| autoUpload | boolean | 可选值 | 是否自动上传 |
| isHTML5 | boolean | 可选值 | 是否是HTML5 |
| filters | Array<FilterFunction> | 可选值 | |
| headers | Array<Headers> | 可选值 | 上传文件的请求头参数 |
| method | string | 可选值 | 上传文件的方式 |
| authToken | string | 可选值 | auth验证的token |
| maxFileSize | number | 可选值 | 最大可上传文件的大小 |
| queueLimit | number | 可选值 | |
| removeAfterUpload | boolean | 可选值 | 是否在上传完成后从队列中移除 |
| url | string | 可选值 | 上传地址 |
| disableMultipart | boolean | 可选值 | |
| itemAlias | string | 可选值 | 文件标记／别名 |
| authTokenHeader | string | 可选值 | auth验证token的请求头 |
在组件对应的HTML模版中设置input标签：
<input type="file" ng2FileSelect [uploader]="uploader" (change)="selectedFileOnChanged($event)" />
在组件.ts文件中设置声明函数：
selectedFileOnChanged() {
// 这里是文件选择完成后的操作处理
}
选择文件默认支持选择单个文件，如需支持文件多选，请在标签中添加multiple属性，即：
<input type="file" ng2FileSelect [uploader]="uploader" (change)="selectedFileOnChanged($event)" multiple />
拖拽文件默认支持多文件拖拽。
对块级元素进行设置（这里以div标签为例）：
<div class="beforeDrop" ng2FileDrop [ngClass]="{dropping: isDropZoneOver}" (fileOver)="fileOverBase($event)" (onFileDrop)="fileDropOver($event)" [uploader]="uploader"><div>
在组件.ts文件中设置声明函数：
fileOverBase(event) {
// 拖拽状态改变的回调函数
}
fileDropOver(event) {
// 文件拖拽完成的回调函数
}
FileUploader有个数组类型的属性queue，里面是所有拖拽的和选择的文件，只要操作这个属性便可以进行文件上传。
this.uploader.queue[0].onSuccess = (response, status, headers) => {
// 上传文件成功
if (status == 200) {
// 上传文件后获取服务器返回的数据
let tempRes = JSON.parse(response);
}else {
// 上传文件后获取服务器返回的数据错误
}
};
this.uploader.queue[0].upload(); // 开始上传
FileUploader是ng2-file-upload最主要的部件，里面包含了所有对文件的处理。
FileUploader的上传队列中。FileUploader的上传队列中移除指定文件。FileUploader上传队列中的所有文件。FileUploader的上传队列中的所有文件。FileUploader的上传队列中的所有文件的上传。FileUploader上传队列中的位置。FileUploader上传队列中的所有未上传的文件。FileUploader上传队列中的所有准备上传的文件。FileUploader实例。FileItem是FileUploader中queue属性的元素类型，在FileUploader中存储的文件的基本类型。
标签：can stat 文件上传 shu www. 拖拽 状态码 des ready
原文地址：https://www.cnblogs.com/airen123/p/9530007.html
