ng2-file-upload上传附件同时传参
由于业务需要,需要的场景是发某条公告的时候能够上传附件,不只是图片,图片的话可以直接用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上传附件同时传参的更多相关文章
- 定制jQuery File Upload为微博式单文件上传
日志未经声明,均为AlloVince原创.版权采用『 知识共享署名-非商业性使用 2.5 许可协议』进行许可. jQuery File Upload是一个非常优秀的上传组件,主要使用了XHR作为上传方 ...
- React实战之Ant Design—Upload上传_附件上传
React实战之Ant Design—Upload上传_附件上传 Upload组件大家都在官方文档中看过了,但写的时候还是会遇到许多问题,一些新手看了文档后感觉无从下手,本文过多的简绍就不说了,直接看 ...
- jQuery文件上传插件jQuery Upload File 有上传进度条
jQuery文件上传插件jQuery Upload File 有上传进度条 jQuery文件上传插件jQuery Upload File,插件使用简单,支持单文件和多文件上传,支持文件拖拽上传,有进度 ...
- kindeditor多图片上传找不到action原来是private File upload成员变量惹得祸
kindeditor多图片上传找不到action原来是private File upload成员变量惹得祸
- 用jQuery File Upload做的上传控件demo,支持同页面多个上传按钮
需求 有这么一个需求,一个form有多个文件要上传,但又不是传统的图片批量上传那种,是类似下图这种需求,一开始是用的swfupload做的上传,但是问题是如果有多个按钮的话,就要写很多重复的代码,于为 ...
- jQuery File Upload跨域上传
最近在做一个一手粮互联网项目,方案为前后端分离,自己负责前端框架,采用了Requirejs+avalonjs+jquery三个框架完成. 前后端通过跨域实现接口调用,中间也发现了不少问题,尤其是在富文 ...
- 《Play for Java》学习笔记(六)文件上传file upload
一. Play中标准方法 使用表单form和multipart/form-data的content-type类型. 1.Form @form(action = routes.Application.u ...
- 上传文件 file upload 学习笔记
这里我只会说说一些完成 file upload 的基础 API. 很多项目我们需要上传文件. 有简单的 input file, 有需要验证的,有需要压缩的(img),有需要分段的(video),有需要 ...
- file 自定义上传附件并展示缩略图
效果图镇楼.. 写的有点乱.上传一个实例供大家参考--附件下载地址如何下: https://files.cnblogs.com/files/fchx91/uploadFiles.rar 2019- ...
随机推荐
- SCUT入门-协议生成器配置
协议生成器需要放在IIS里才能正常使用.具体目录在:Scut\Source\Tools\ContractTools\release 关于具体细节看这篇:https://github.com/ScutG ...
- Leetcode[81]-Search for a Range
Link: https://leetcode.com/problems/search-in-rotated-sorted-array-ii/ Given a sorted array of integ ...
- nginx rewrite目录对换
/123/xxx----->xxx?id=123 [root@web01 default]# pwd /app/www/default [root@web01 └── sss └── index ...
- sensor dma alloc failed问题
打印信息 [CAPTURE][printCapCapbility:93]:D/ driver:sunxi-vfe [CAPTURE][printCapCapbility:94]:D/ card:sun ...
- HTTP Header Accept-Language的ctf
题目也不知道该怎么取,但是是实在的一个案例.分享给大家. 种族歧视分值: 300 小明同学今天访问了一个网站,竟然不允许中国人访问!太坑了,于是小明同学决心一定要进去一探究竟! 发现accept-L ...
- 存档格式选择--JSON
游戏里存档可以直接用lua,但是lua需要有一定编程基础:另外可以用ini,不过ini又太简单了,复杂的 格式无法用ini描述:还可以用xml,它的表达能力非常丰富,甚至有限数据库都用xml来作存储结 ...
- love2d--glsl02变量和语句
Shader分为顶点着色器和片段着色器,GPU先处理顶点再处理片段,大概可以这么理解, 顶点着色器处理模型里的点,输出处理后的数据,这些数据经过GPU其它模块处理后传入 片段着色器,经片段着色器综合后 ...
- oozie4.3.0的安装与配置 + hadoop2.7.3
安装步骤 mysql的配置 oozie的安装 oozie的配置 oozie的启动与登录 常用oozie的命令 1. mysql的配置 mysql的安装自行解决,然后在mysql上 创建oozie数据库 ...
- wrk -- 小巧轻盈的 http 性能测试工具.
标签: wrk http 性能 | 发表时间:2015-06-21 00:55 | 作者:zjumty 出处:http://www.iteye.com 测试先行是软件系统质量保证的有效手段. 在单元测 ...
- windows下端口占用解决方法-查看和杀死占用端口进程
在Windows下启动程序时有时会遇到端口被占用的情况,由于一个端口同时只能运行一个进程,所以要想启动新的程序就要先把占用该端口的进程给kill掉,具体的命令分为以下三步, 以杀死占用了80端口的进程 ...