首页 > 其他分享 >Angular 结合primeNG 批量上传文件

Angular 结合primeNG 批量上传文件

时间:2024-05-14 17:21:06浏览次数:20  
标签:files index primeNG 上传 body event item data Angular

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

 

标签:files,index,primeNG,上传,body,event,item,data,Angular
From: https://www.cnblogs.com/Fengge518/p/18191251

相关文章

  • C#使用PuTTY加密上传文件
    需求:加密通过SFPT上传文件1.安装PuTTY2.生成文件,文件不用后缀名 3.上代码classProgram{privatestaticstringfile="C:\\Users\\3859\\Desktop\\RODHoldToRepairOrScrapListKSZRODHL2022-10-28\\T326\\ReceivingReport-20240510100.xlsx";s......
  • jumpserver windows 上传文件大小限制配置
    jumpserverYoudonothavepermissiontouploadthisfile.Ifyourequireaccess,pleasecheckyoursystemsettings,orcheckwithyoursystemadministratorif["$SECRET_KEY"=""];thenSECRET_KEY=`cat/dev/urandom|tr-dcA-Za-z0......
  • Springboot+React实现Minio文件分片上传、断点续传
    前言本文采用前后端结合,后端给前端每个分片的上传临时凭证,前端请求临时url,通过后端间接的去上传分片。其实无关乎vue或者react,思路都是一样的,逻辑也全都是js写的,跟模板语法或者jsx也没关系,仅仅是赋值不一样而已。前端:React+TypeScript+Antd+axios+spark-md5+p-......
  • uniapp小程序上传图片到腾讯云
    记录下首次首次使用uniapp小程序上传图片到腾讯云1、去腾讯云查看资料,因为图片是上传到腾讯云的,无非就是网络请求与验证的关系,参考资料https://cloud.tencent.com/2、在腾讯云控制塔输入 '对象存储'   3、找到API文档和SDK文档 4、选择您需要的SDK,我需要是小程序SDK......
  • springboot文件上传下载到本机服务器上
    这次的文件上传下载仅指的是本机的服务器,不指第三方文件存储系统!!!1.在pom中加入以下依赖,如已经加入,请忽略<dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-thymeleaf</artifactId> </dependency> <depende......
  • 记录一次Windows上简单向linux上传文件
    1直接账号密码登录上传---使用winscp(得先安装winscp)``@echooffREM设置WinSCP安装路径setWINSCP_PATH="C:\ProgramFiles(x86)\WinSCP\WinSCP.com"REM设置连接参数setHOSTNAME=192.168.1.112setUSERNAME=rootsetPASSWORD=xxxxxxxxsetREMOTE_PATH=/home/......
  • 无需手动操作:利用 Playwright 自动上传文件
    前言Playwright是一个由Microsoft开发的自动化测试工具,它提供了跨浏览器的自动化测试能力,包括Chrome、Firefox和Safari。除了测试之外,Playwright还可以用于执行浏览器操作,例如模拟用户行为来实现文件上传功能。在本文中,我们将使用Playwright和Python实现自动上传文件......
  • Angular | 理解Angular的项目和工具
    1.项目的目录层级是什么样的​ 分为内外结构,外结构:关于项目的文件:package.json,package-lock.json,tconfig.json,angular.json,gitignore,ReadMe.txt,e2e,src​ 内结构,则是src里面的结构,包括app源码目录;assets静态文件目录;environment环境文件目录;index.html主页文件;mian.tsTy......
  • 探索Django:从项目创建到图片上传的全方位指南
    Django是什么Django是一个流行的PythonWeb开发框架,它提供了一系列工具和库,用于帮助开发人员构建高效、可扩展的Web应用程序。Django的目标是让开发者能够以快速和简单的方式构建复杂的Web应用,通过提供许多预构建的组件和功能,如ORM(对象关系映射)、表单处理、认证系统、管......
  • 不安全的文件上传(Pikachu)
    概述文件上传功能在web应用系统很常见,比如很多网站注册的时候需要上传头像、上传附件等等。当用户点击上传按钮后,后台会对上传的文件进行判断比如是否是指定的类型、后缀名、大小等等,然后将其按照设计的格式进行重命名后存储在指定的目录。如果说后台对上传的文件没有进行任何......