NG-ZORRO文件上传控件实现方案
前端上传组件配置
1. 控件基本配置
核心属性说明：
- nzFileList: 双向绑定的文件列表对象
- nzBeforeUpload: 上传前执行的钩子函数
<nz-upload
[nzAction]="''"
[(nzFileList)]="uploadFiles"
[nzBeforeUpload]="validateFile">
<button nz-button nzType="primary">
<i nz-icon nzType="upload"></i>
</button>
</nz-upload>2. 文件验证与提交
上传前验证逻辑：
uploadFiles: NzUploadFile[] = [];
validateFile = (file: NzUploadFile): boolean => {
const maxSize = 4 * 1024 * 1024;
if (file.size! > maxSize) {
this.notification.error('文件大小超过限制');
return false;
}
this.uploadFiles = [...this.uploadFiles, file];
return true;
}文件提交方法：
async submitFiles() {
const formPayload = new FormData();
this.uploadFiles.forEach(item => {
formPayload.append('attachments', item);
});
formPayload.set('sourceSystem', 'HR');
formPayload.set('category', 'contract');
await this.http.post('http://api.domain.com/file/upload', formPayload).toPromise();
}3. 文件下载实现
fetchFile(fileMeta: FileMeta) {
const downloadReq = {
path: fileMeta.storagePath,
id: fileMeta.fileId,
name: fileMeta.fileName
};
this.http.post('http://api.domain.com/file/download',
downloadReq,
{ responseType: 'arraybuffer' }
).subscribe(response => {
const blob = new Blob([response]);
const url = URL.createObjectURL(blob);
const anchor = document.createElement('a');
anchor.href = url;
anchor.download = fileMeta.fileName;
anchor.click();
URL.revokeObjectURL(url);
});
}后端API实现
1. 文件接收处理
[HttpPost]
[Route("file/upload")]
public IHttpActionResult ReceiveFiles()
{
var request = HttpContext.Current.Request;
string targetDir = ConfigurationManager.AppSettings["StoragePath"];
if (!Directory.Exists(targetDir))
Directory.CreateDirectory(targetDir);
var resultData = new List<FileMeta>();
foreach (string fileKey in request.Files)
{
var httpFile = request.Files[fileKey];
string uniqueId = Guid.NewGuid().ToString("N");
string fullPath = Path.Combine(targetDir, uniqueId);
httpFile.SaveAs(fullPath);
resultData.Add(new FileMeta {
FileId = uniqueId,
FileName = httpFile.FileName,
FilePath = fullPath,
Size = httpFile.ContentLength
});
}
return Ok(resultData);
}2. 文件下载服务
[HttpPost]
[Route("file/download")]
public HttpResponseMessage GetFile(DownloadRequest req)
{
if (!File.Exists(req.path))
return Request.CreateErrorResponse(HttpStatusCode.NotFound, "文件不存在");
HttpResponseMessage response = new HttpResponseMessage();
FileStream stream = new FileStream(req.path, FileMode.Open);
response.Content = new StreamContent(stream);
response.Content.Headers.ContentDisposition =
new ContentDispositionHeaderValue("attachment") {
FileName = HttpUtility.UrlEncode(req.name)
};
return response;
}文件元数据存储建议：
- 文件服务返回唯一标识ID
- 业务系统存储文件ID与元数据
- 下载时通过ID获取文件路径
