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
      });
    }
  }

 

posted @ 2024-05-14 17:16  天天向上518  阅读(23)  评论(0编辑  收藏  举报