一、新增(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查詢顯示上傳的檔案： 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 以上有效： 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; } }
以上就可以保證檔案在新增或修改頁面上可以順利上傳。
二、檢視頁面上，點選下載下傳檢視上傳的附件：
在檢視頁面上，調用接口查詢附件清單，顯示在頁面上，并可以點選下載下傳檔案檢視：
曆史附件