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

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

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

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

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

html文件

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

ts文件

export class NoticeAddComponent implements OnInit {
uploader: FileUploader = new FileUploader({
url: `${environment.path}/accessory`, //上传地址
method: "POST",
allowedFileType:["image","xls","video","pdf","doc"],
autoUpload: false,
parametersBeforeFiles:true
});
noticeId = “1”; ngOnInit() {
// 因为这个地方卡壳了好久。。刚开始用的是onAfterAddingFile没有用onBuildItemForm 这俩区别见文档: http://www.mamicode.com/info-detail-1930118.html
this.uploader.onBuildItemForm = (item => {
console.log(item)
item.withCredentials = false
// 把参数加到url里让后台从url获取
item.url = item.url+'?noticeId='+this.noticeId
})
// 新增保存
_sendSaveNoticeSever(){
this.interfaceService.sendSaveNoticeSever({
data:this.addParams,
onSuccess:(res)=>{
console.log('新增保存')
console.log(res)
this.noticeId = res.data.data.toString();
// 在保存这条公告之后获得保存接口返回的id, 调用上传文件方法把这个id传参给后台
this.uploadFile();
},
onFailed:(err)=>{
console.log(err)
}
})
} } }

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. RPC服务框架dubbo(六):Consumer搭建过程

    1.在pom.xml中除了ssm的依赖添加dubbo相关3个依赖(接口,dubbo.jar,zkClient) 2.web.xml中修改<init-value>applicationCon ...

  2. Mysql对结果集的各种处理操作

    c++操作- 查询mysql结果集 用mysql进行数据查询的时候,mysql会返回一个结果集给我们.接着我们需要调用mysql的api,从这个结果集中取得我们要的数据. 取完数据之后,需要释放这个结 ...

  3. 禁止用户登陆的 /bin/false和/sbin/nologin的区别

    1 区别 /bin/false是最严格的禁止login选项,一切服务都不能用. /sbin/nologin只是不允许login系统  小技巧: 查看 /etc/passwd文件,能看到各用户使用的sh ...

  4. oracle锁表,杀死进程

    查询锁表数据 select object_name,machine,s.sid,s.serial#from v$locked_object l,dba_objects o ,v$session swh ...

  5. hdu 5384 Danganronpa(字典树)

    题意: f(A,B)表示:B在A中作为子串出现的次数. 题目给出n个证据,m个子弹 Ai是证据.Bi是子弹.题目问:全部Bi对每一个Ai造成的伤害是多少,即每一个Bi在Ai中出现的次数总和. 解析: ...

  6. 《剑指offer》解题笔记

    <剑指offer>解题笔记 <剑指offer>共50题,这两周使用C++花时间做了一遍,谨在此把一些非常巧妙的方法.写代码遇到的难点.易犯错的细节等做一个简单的标注,但不会太过 ...

  7. Android基础总结(二)布局,存储

    常见布局 相对布局 RelativeLayout 组件默认左对齐.顶部对齐 设置组件在指定组件的右边 android:layout_toRightOf="@id/tv1" 设置在指 ...

  8. sqlserver、mysql怎样获取连接字符串

    sqlserver.mysql怎样获取连接字符串 步骤: 一.新建文本文档xxx.txt,改动文件类型为.udl 二.打开该文件,在<提供数据>中找到相应的服务. 三.在连接中选择须要的数 ...

  9. 回车替换Tab 并不会 提交表单 IE Chrome 通过

    网上一堆可以回车替换tab的代码,可是基本都忽略谷歌浏览器的兼容性,找了3个小时 试了无数遍,终于总结出这一段代码,希望能帮到需要的同学,也给自己留个备忘        document.onkeyd ...

  10. java 包 和 物理目录 解惑

    今天做 JUnit 实验, 发现在物理实际不同的目录(src, testsrc)下可以使用相同的包名, 并且在这两个目录下, 都有个子目录 coolUnit (这个子目录是配合 package 使用的 ...