Angular 结合primeNG 批量上传文件
1:angular 使用primeNG 批量上传文件的操作(分两步,先上传文件到minio文件服务器,在写入到业务数据)
2:前端 html code
<div> <p-fileUpload mode="basic" name="files" url="{{flieUploadFiles}}" accept="image/*" (onUpload)="onfilesuploadnew($event)" [auto]="true" chooseLabel="Browse" [multiple]="multiple"></p-fileUpload> </div> //一个具体的上传文件的地址 this.flieUploadFiles = this.AddProductHttp.uploads; // uploads = qutationURL + '/api/file/upload-files'
3:上传文件到minio服务器
[HttpPost("upload-files")] public async Task<ResponseResult<List<UploadedResultNewDto>>> UploadFilesAsync([FromForm] List<IFormFile> files) { try { return await _uploadAppService.UploadFilesAsync(files); } catch (System.Exception) { return ResponseResult<List<UploadedResultNewDto>>.Fail(message: "upload files fail !!!"); } } [AllowAnonymous] public async Task<ResponseResult<List<UploadedResultNewDto>>> UploadFilesAsync(List<IFormFile> files) { if (files != null && files.Count > 10) { return ResponseResult<List<UploadedResultNewDto>>.Fail(message: "You can upload up to ten files at a time"); } long maxLength = ConnectionJsonDto.MaxUploadFileSizeLength;// 1024 * 1024 * 20; for (int i = 0; i < files.Count; i++) { bool lengSize = (files[i].Length) > maxLength; Console.WriteLine($"{files[i].Name}--length:{files[i].Length}"); if (lengSize) { return ResponseResult<List<UploadedResultNewDto>>.Fail(message: "The maximum value of a single file is 20 MB"); } } var results = new List<UploadedResultNewDto>(); foreach (var item in files) { if (item != null) { string thisFIleName = item.FileName; string extStr = Path.GetExtension(item.FileName); string fpath = $"{DateTime.Now.Year}/{DateTime.Now.Month}/{DateTime.Now.ToString("yyyy-MM-dd")}/{Guid.NewGuid()}{extStr}"; var obj = await _minioBroker.PutObjectAsync(fpath, item.OpenReadStream(), item.ContentType); var data = new UploadedResultNewDto { OrgName = thisFIleName, ContentType = item.ContentType, FileName = obj, FileLength = item.Length, }; results.Add(data); } } return ResponseResult<List<UploadedResultNewDto>>.Success(data: results); }
4:上传数据到业务数据的js code
public postProductAppendixFilesNew(data?: any,ProductId?: any) { const header: any = {} return this.http.request({ url: qutationURL + '/api/eme/ProductModel/BatchAddProductAppendixFiles/'+ProductId, method: 'post', data, }, header); }
5:(onUpload)="onfilesuploadnew($event)" 页面的操作事件
onfilesuploadnew(event: any) { console.log(event); // console.log(" event.files.length="+ event.files.length); // console.log("event.files[index].orgname="+event.originalEvent.body.data[0].orgName); // console.log(" event.files[index].fileName="+event.originalEvent.body.data[0].fileName); if (event.originalEvent.body.code == 0) { let filesinfo = []; for (let index = 0; index < event.files.length; index++) { let uf = { "OrgName": event.originalEvent.body.data[index].orgName, "FileName": event.originalEvent.body.data[index].fileName, "FileLength": event.originalEvent.body.data[index].fileLength, "ProductId": this.id, "ContentType": event.originalEvent.body.data[index].contentType } filesinfo.push(uf); } // let jsonDto=JSON.stringify(filesinfo); this.AddProductHttp.postProductAppendixFilesNew(filesinfo, this.id).then((res: any) => { if (res.code == 0) { this.getInfo(); this.messageService.add({ severity: 'success', summary: "Upload Success !!!", life: 1500 }); } else { this.messageService.add({ severity: 'error', summary: "error ,please upload files again", life: 1500 }); } }) } else { this.messageService.add({ severity: 'error', summary: "fail ,please upload files again", life: 2000 }); } }
如有疑问或者错误的地方,请跟帖,本人会第一时间答复以及相互学习,谢谢!个人会不断的上传自己的学习心得!
好了今天就先到这里,下次有时间再更新,如果存在不合理的地方,欢迎大家多多指教留言!!!