html如何给上传界面添加格式,上传附件，并在查看页面（view.component.html）展示之前用户上传的附件...

一、新增(add)修改(update)页面上的文件上传：

用户在系统的新增页面上，上传了一些附件：

在页面中我们需要使用上传控件的一些方法，保证附件能够顺利上传并存储，还需要控制上传完成的附件可以进行删除操作：

上传附件

1、文件格式支持：{{acceptFileType}}

2、文件大小：小于50M

添加

其中，标签中显示了一个圆点按钮，鼠标浮动时会显示提示信息：

1、文件格式支持：――――(acceptFileType文件格式绑定组件中的acceptType这一参数进行维护) acceptFileType = ''; // 可接受的文件类型 constructor( private fb: FormBuilder, private router: Router, private globalProvider: GlobalProvider, private uploadProvider: FileUploadProvider, private MesCenterProvider: MesCenterProvider, private notice: NoticeProvider, private activatedRoute: ActivatedRoute, private modalService: NzModalService, ) { this.acceptFileType = this.globalProvider.acceptFileType; .......... }

2、文件大小：小于50M

[nzAction]="image_upload_url"是在ts组件中绑定的文件上传路径，这里是： image_upload_url = this.appConfig.api.base_url + '/upload/sysUpload/add';

[(nzFileList)]="fileList"是上传文件的列表，在组件中，可以在查看页面上，根据文件的id查询显示上传的文件： /** * 根据id查询附件 * @param id */ getFile(baseFiles) { baseFiles.forEach(item => { const file = { id: item.fileId, uid: item.fileId, name: item.fileName, status: 'done', url: this.MesManagementProvider.getDownloadUrl(item.filePath), message: 'success' }; this.fileList = [...this.fileList, file]; this.fileInfoList.push(item); }); }

[nzRemove]="handleRemove"是文件移除时的回调，点击上传过的文件后的删除按钮，可以将上传过的文件从fileList中删除： /** * 附件移除时回调 */ handleRemove = (file: UploadFile) => { let id; if (!helpers.IsEmpty(file.response)) { id = file.response.data.id; } else { id = file.id; } const index = this.fileInfoList.findIndex(item => item === id); this.fileInfoList.splice(index, 1); return true; }

(nzChange)="handleChange($event)"是在文件开始、上传进度、完成、失败时都会调用的方法： /** * 开始、上传进度、完成、失败都会调用这个函数。 */ handleChange({ file, fileId, fileName, filePath }): void { const status = file.status; if (status === 'done') { if (file.response.status === 0) { this.notice.info('上传成功'); this.fileList.forEach(item => { fileId = item.response.data.id, fileName = item.name, filePath = item.response.data.url, // 上传时带消息url this.fileInfoList.push({ fileId, fileName, filePath }); }); this.validateForm.value.baseFiles = this.fileInfoList; } else { this.notice.error(file.response.message); this.validateForm.controls['baseFiles'] = null; this.fileList.splice(this.fileList.length - 1, 1); } } else if (status === 'error') { this.notice.error('上传失败'); } }

上传成功file.response.status状态码为0，失败状态码为1。上传成功时存储文件id：fileId，文件名称fileName和文件路径filePath，并塞到fileInfoList文件数组中存储。

[nzHeaders]="requestHeader" 是设置上传的请求头部，IE10 以上有效： /** * 设置上传的请求头部，IE10 以上有效；注意：务必使用 => 定义处理方法。 */ requestHeader = (file: UploadFile) => { return this.uploadProvider.setRdequestHeaders(); }

在uploadProvider服务中设置请求头： /** * 设置请求头 */ setRdequestHeaders() { const tokenInfo = this.globalData.tokenInfo; const XCMG = `Bearer ${tokenInfo.access_token}`; return { Authorization: XCMG }; }

[nzBeforeUpload]="beforeFileUpload"是在文件上传之前调用的，限制上传文件的大小： beforeFileUpload = (file): Boolean => { if (file && file.size > 50 * 1024 * 1024) { this.notice.error('上传的文件不能超过50M！'); return false; } else { return true; } }

以上就可以保证文件在新增或修改页面上可以顺利上传。

二、查看页面上，点击下载查看上传的附件：

在查看页面上，调用接口查询附件列表，显示在页面上，并可以点击下载文件查看：

历史附件