Angular 文件上传、下载
发布时间:2020-12-17 07:04:38 所属栏目:安全 来源:网络整理
导读:1. 文件上传 本地可同时选择多个文件 将本地所选择的文件列出来 单个文件上传至服务器; 删除本地选择的文件 样式使用了bootstrap的样式 1. html - file.component.html 文件上传按钮 文件列表(文件名称、状态、操作 - 删除、上传) form class="form-horizon
1. 文件上传
1. html - file.component.html
<form class="form-horizontal" enctype="multipart/form-data"> <div class="form-group"> <label class="col-sm-2 control-label">选择文件</label> <div class="col-sm-9"> <!-- 选择本地文件 - multiple="multiple"多选;accept=".xls,.doc,.pdf"限制条件;(change)="fileChange()"每次选择本地文件完成后触发的函数;--> <input type="file" class="btn" multiple="multiple" (change)="fileChange()" accept=".xls,.pdf" #filesMulti style="padding-left:0; "/> <!-- 本地文件列表 --> <table *ngIf="fileData.length && fileData" class="table table-bordered table-striped wjccgl_table" id="file_name_contain" #fileNameContain> <thead> <tr> <td>文件名</td> <td>操作</td> <td>状态</td> </tr> </thead> <tbody> <tr *ngFor="let item of fileData,let i = index"> <td>{{item.fileName}}</td> <td> <a href="javascript:;" (click)="fileDel(item.fileName)">删除</a> </td> <td> <a href="javascript:;" (click)="fileUpload(item.file,i)">上传</a> <span class="label label-default" *ngIf="item.status === ‘未上传‘">未上传 </span> <span class="label label-success" *ngIf="item.status === ‘已上传‘">已上传 </span> <span class="label label-error" *ngIf="item.status === ‘上传失败‘">上传失败 </span> </td> </tr> </tbody> </table> <!-- 提示信息 --> <p class="help-block">* 目前只支持word/excel/pdf文件上传.</p> </div> </div></form> 2. ts - file.component.ts
// 导入文件数据的模型文件 import {FileItemModel} from ‘./file.model‘; // 声明jquery,目的:在ts环境中可以使用js; declare const $: any; export class FileUpComponent implements { // 定义文件数组 fileData: FileItemModel[] = []; // 获取文件上传的inputHTML元素 @ViewChild(‘filesMulti‘) private fileMulti: ElementRef; // 当选择本地文件后触发此方法 fileChange() { // 获取选中的文件数组 const t_files = this.fileMulti.nativeElement.files; const fileThis = this; for ( let i = 0; i < t_files.length; i++) { const fileItem: FileItemModel = new FileItemModel(); fileItem.fileName = files[i].name; fileItem.file = files[i]; fileItem.status = ‘未上传‘; fileThis.fileData.push(fileItem); } // 清空html中file的显示信息 $(this.fileMulti.nativeElement).val(‘‘); } // 删除选择的本地文件 fileDel(name: string) { for (let i = 0; i < this.fileData.length; i++ ) { if (this.fileData[i].fileName === name) { this.fileData.splice(i,1); } } }} // 单个文件上传 fileUpload(file,index) { // 构造参数 const formData = new FormData(); formData.append(‘file‘,file,file.name); // 上传至服务器 this.http.post(‘/file/upload‘,formData).subscribe((data: any) => { if (respData.success && respData.errcode === 2000) { // 如果上传成功 // 此文件状态改为已上传 this.fileData[index].status = ‘已上传‘; // 文件名称改为服务器返回的文件名 this.fileData[index].fileName = respData.data.fileName; // 记录文件的ID this.fileData[index].fileId = respData.data.fileId; } else { // 将此文件的文件状态改为‘上传失败’ this.fileData[index].status = ‘上传失败‘; } }); } 3. model - file.model.ts - 定义上传文件所需要的模型类export class FileItemModel { file: object; fileId: string; fileName: string; status: string; } 4. 预览结果;
2. 文件下载1. html - file.component.html<a href="javascript:;" (click)="fileDown(文件ID)">需要下载的文件名称</a> 2. ts - file.component.tsexport class FileComponent { fileDown(fileId: string) { // 下载 window.location.href = `/file/download?fileId=${fileId}`; } } (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |