由于业务需要,需要的场景是发某条公告的时候能够上传附件,不只是图片,图片的话可以直接用base64传给后台,但上传附件这个就不能这样干了,

与此同时,每条公告都有一个对应的唯一标识id, 附件以文件流形式传给后台,需要再上传附件的时候加上一个id参数一同传给后台。

刚开始一直报400错误,500错误,开始试图通过普通的post请求,常规方式传参,像这种

然后发现不行,搜了好多方法说要设置请求头content-type,设置了然并卵。。还尝试过通过formdata传参,结果发现后台接收不到然后就想到能不能从url中获取参数

因为前端是用ng2-file-upload这个插件上传附件

html文件

  1. <input class="file" type="file" ng2FileSelect [uploader]="uploader" value="点击上传" (change)="selectedFileOnChanged($event)"/>

ts文件

  1. export class NoticeAddComponent implements OnInit {
  2. uploader: FileUploader = new FileUploader({
  3. url: `${environment.path}/accessory`, //上传地址
  4. method: "POST",
  5. allowedFileType:["image","xls","video","pdf","doc"],
  6. autoUpload: false,
  7. parametersBeforeFiles:true
  8. });
  9. noticeId = 1”;
  10.  
  11. ngOnInit() {
  12. // 因为这个地方卡壳了好久。。刚开始用的是onAfterAddingFile没有用onBuildItemForm 这俩区别见文档: http://www.mamicode.com/info-detail-1930118.html
  13. this.uploader.onBuildItemForm = (item => {
  14. console.log(item)
  15. item.withCredentials = false
  16. // 把参数加到url里让后台从url获取
  17. item.url = item.url+'?noticeId='+this.noticeId
  18. })
  19. // 新增保存
  20. _sendSaveNoticeSever(){
  21. this.interfaceService.sendSaveNoticeSever({
  22. data:this.addParams,
  23. onSuccess:(res)=>{
  24. console.log('新增保存')
  25. console.log(res)
  26. this.noticeId = res.data.data.toString();
  27. // 在保存这条公告之后获得保存接口返回的id, 调用上传文件方法把这个id传参给后台
  28. this.uploadFile();
  29. },
  30. onFailed:(err)=>{
  31. console.log(err)
  32. }
  33. })
  34. }
  35.  
  36. }
  37.  
  38. }

ng2-file-upload里的方法 onAfterAddingFile 和 onBuildItemForm 一定要注意,因为这里的场景是需要保存获取id之后再上传附件,所以需要调用onBuildItemForm 这个方法,这个需要注意一下

ng2-file-upload上传附件同时传参的更多相关文章

  1. 定制jQuery File Upload为微博式单文件上传

    日志未经声明,均为AlloVince原创.版权采用『 知识共享署名-非商业性使用 2.5 许可协议』进行许可. jQuery File Upload是一个非常优秀的上传组件,主要使用了XHR作为上传方 ...

  2. React实战之Ant Design—Upload上传_附件上传

    React实战之Ant Design—Upload上传_附件上传 Upload组件大家都在官方文档中看过了,但写的时候还是会遇到许多问题,一些新手看了文档后感觉无从下手,本文过多的简绍就不说了,直接看 ...

  3. jQuery文件上传插件jQuery Upload File 有上传进度条

    jQuery文件上传插件jQuery Upload File 有上传进度条 jQuery文件上传插件jQuery Upload File,插件使用简单,支持单文件和多文件上传,支持文件拖拽上传,有进度 ...

  4. kindeditor多图片上传找不到action原来是private File upload成员变量惹得祸

    kindeditor多图片上传找不到action原来是private File upload成员变量惹得祸

  5. 用jQuery File Upload做的上传控件demo,支持同页面多个上传按钮

    需求 有这么一个需求,一个form有多个文件要上传,但又不是传统的图片批量上传那种,是类似下图这种需求,一开始是用的swfupload做的上传,但是问题是如果有多个按钮的话,就要写很多重复的代码,于为 ...

  6. jQuery File Upload跨域上传

    最近在做一个一手粮互联网项目,方案为前后端分离,自己负责前端框架,采用了Requirejs+avalonjs+jquery三个框架完成. 前后端通过跨域实现接口调用,中间也发现了不少问题,尤其是在富文 ...

  7. 《Play for Java》学习笔记(六)文件上传file upload

    一. Play中标准方法 使用表单form和multipart/form-data的content-type类型. 1.Form @form(action = routes.Application.u ...

  8. 上传文件 file upload 学习笔记

    这里我只会说说一些完成 file upload 的基础 API. 很多项目我们需要上传文件. 有简单的 input file, 有需要验证的,有需要压缩的(img),有需要分段的(video),有需要 ...

  9. file 自定义上传附件并展示缩略图

    效果图镇楼..   写的有点乱.上传一个实例供大家参考--附件下载地址如何下: https://files.cnblogs.com/files/fchx91/uploadFiles.rar 2019- ...

随机推荐

  1. mysql_use_result & mysql_store_result & MYSQLI_ASYNC

    博文一 : 在使用 mysql_query() 进行一次查询后,一般要用这两个函数之一来把结果存到一个 MYSQL_RES * 变量中. 两者的主要区别是,mysql_use_result() 的结果 ...

  2. 简洁经常使用权限系统的设计与实现(一):构造权限菜单树的N(N&gt;=4)种方法

    权限系统.Web开发常见标准子系统之中的一个.结合自己的一些思考和实践,从本篇開始权限系统的设计与实现之路. 近期,重构了项目的权限菜单构造过程,向前端返回json格式的权限树. 这一篇.仅仅是大致介 ...

  3. Linux下解压tar.xz

    tar xvJf  ***.tar.xz 注意零散文件,最好放到文件夹里

  4. Atitit.软件仪表盘(0)--软件的子系统体系说明

    Atitit.软件仪表盘(0)--软件的子系统体系说明 1. 温度检测报警子系统 2. Os子系统 3. Vm子系统 4. Platform,业务系统子系统 5. Db数据库子系统 6. 通讯子系统 ...

  5. 在无法单步调试的情况下找Bug的技巧

    比如说你有一个大的模块A,其组成部分有B,C,D这3个小的模块,现在A出了一个BUG,因为某种原因的限制你无法单步调试.怎么较快地定位BUG发生的根源? 这里记录一下刚才我在找BUG的时候采用的思路, ...

  6. Codeforces 482C Game with Strings(dp+概率)

    题目链接:Codeforces 482C Game with Strings 题目大意:给定N个字符串,如今从中选定一个字符串为答案串,你不知道答案串是哪个.可是能够通过询问来确定, 每次询问一个位置 ...

  7. Unix系统编程()深入探究文件IO概述

    open调用将引入原子atomicity操作的概念. 将某一系统调用所要完成的各个动作作为不可中断的操作,一次性加以执行. 原子操作是许多系统调用得以正确执行的必要条件. 还介绍一个系统调用fcntl ...

  8. Linux crontab 实现每秒执行

    Linux crontab 实现每秒执行 linux crontab 命令,最小的执行时间是一分钟.如需要在小于一分钟内重复执行,可以有两个方法实现. 1.使用延时来实现每N秒执行 创建一个php做执 ...

  9. Memcached 1.4.20 发布,集中式缓存系统

    内存缓存Memcached 1.4.20发布.2014-05-12 上一个版本是2014-05-01的1.4.19  此版本只修正了一个1.4.18和1.4.19中引入的Bug. 此版本只是修复了导致 ...

  10. CPU被夺走的三种状态 执行时间久了 IO操作让cpu等待 被优先级高的抢占

    CPU被夺走的三种状态   执行时间久了    IO操作让cpu等待  被优先级高的抢占