需求:使用angular 6 上传文件,文件为pdf格式,单个文件不超过10m,且文件不能重复,且文件名最长50位,点击进来时就筛选pdf文件,其他格式文件过滤
HTML:
<input accept=".pdf" class="fill" type="file" *ngIf="uploader.queue.length==0" ng2FileSelect [uploader]="iploader" title="" (change)="selects($event)" style="position:absolute;top:2px;left:5px;opacity:0;width:88px">
*ngIf="uploader.queue.length==0"是解决文件名不能重复的问题,
accept 是html的自带的,是过滤pdf格式文件
文件上传按钮
TS:
首先导入模块,导入到app.module,后者拆分模块都可以,拆分模块指针当前拆分模块有效
import { FileUploadModule} from " ng2-file-upload";
@NgModule({
imports:[
...
FileUploadModule
...
]
)
在当前文件下,引入
import{FileUploader, ParsedResponseHeaders} from"ng2-file-upload";
uploader: FileUploader=new FileIUploader({
url:url,//url
itemAlias:"file",
isHTML5:true,
removeAfterUpload:true,
additionalParameter:{
token:'token',//token值
}
})
selects(e) {
if (e.target.files[0].size >= 10485760) {
//解决的是大于10m文件
//.....
this.uploader.clearQueue();//清除fileuplaoder上传队列的文件
} else {
//...
this.data = {
user_no: user_nom,//用户名
file_no: file - no,//文件名
token: token //token值
}
this.uploader, setOptions({
additionalParameter: this.data
})
let name = e.target.files['0']['name'];//被选中的文件名称
if (this.uploadArr.length >= 1) {
for (const key in this.uploadArr) {
if (this.uploadArr.hasOwnPeoperty(key)) {
const element = this.uploadArr[key];
if (element['fileName'] != name) {
this.uploaders();//文件上传没有问题时
} else {
this.uploader.clearQueue();//清除fileuplaoder的上唇队列
}
}
}else if (this.uplaodArr.length == 0) {
this.uploaders()
}
}
}
}
uploaders() {
this.uploaders.queue.forEach(queue => {
queue.withCredentials = false;
queue.error = (response: string, status: number, header: ParsedResponseHeader) => {
//上传服务器出错
};
queue.onSuccess = (response, status, heders) => {
if (status == 200) {
let res = JSON.parse(response);
let maxsize.respHeader.error_code;
if (maxsize == "resp_0000") {
this.reqNumber = res.respBody.reqNo;
let files = Number(res.respBody.fileSize / 1024);//体积大小
files >= 1000 ? this.fileSize = (files / 1024).toFixed(2) + 'M' : this.fileSize = files.toFixed(2) + 'k';
this.uploadArr.push({ 'name': res.respBody.fileName, 'fileSize': this.files })
} else if (maxsize == "P0007") {
//文件上传失败
} else {
//其他错误处理
}
}
}
});
}
网友评论