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- ...
随机推荐
- python 日志的配置,python对日志封装成类,日志的调用
# python 日志的配置,python对日志封装成类,日志的调用 import logging # 使用logging模块: class CLog: # --------------------- ...
- 分布式ID生成方案
系统唯一ID是设计一个系统的时候常常会遇到的问题,也常常为这个问题而纠结. 生成ID的方法有很多,适应不同的场景.需求以及性能要求.所以有些比较复杂的系统会有多个ID生成的策略. 0. 分布式ID要求 ...
- JAVA类加载器概念与线程类加载器
类加载器的功能:通过一个类的全限定名来获取描述此类的二进制字节流的过程 java的类加载器大致可以分为两类,一类是系统提供的,一类是由应用开发人员编写的.系统提供的类加载器有以下三种: 引导类加载器( ...
- cocos2dx 3.x 开发环境搭建
1. 准备工作 (1)VS2012 (2)cocos2dx cn.cocos2d-x.org/download (3)python 新版本的cocos2dx 需要python编译 2. 安装软件 (1 ...
- FreeRTOS 调度锁,任务锁和中断锁
以下转载自安富莱电子: http://forum.armfly.com/forum.php 调度锁调度锁就是 RTOS 提供的调度器开关函数,如果某个任务调用了调度锁开关函数,处于调度锁开和调度锁关之 ...
- Makefile学习之路6——让编译环境更加有序
在大多项目中都会合理设计目录结构来提高维护性,在编译一个项目时会产生大量中间文件,如果中间文件直接和源文件放在一起,就显得杂乱而不利于维护.在为现在这个complicated项目编写makefile之 ...
- ldap temp
#http://www.openldap.org/software/man.cgi?query=slapcat&apropos=0&sektion=0&manpath=Open ...
- [Shell Script]关于source和sh对于脚本执行不同
当我修改了/etc/profile文件,我想让它立刻生效,而不用重新登录:这时就想到用source命令,如:source /etc/profile对source进行了学习,并且用它与sh 执行脚本进行 ...
- 虚拟化–操作系统级 LXC Linux Containers内核轻量级虚拟化技术
友情提示:非原文链接可能会影响您的阅读体验,欢迎查看原文.(http://blog.geekcome.com) 原文地址:http://blog.geekcome.com/archives/288 软 ...
- 绑定内网和安全redis和mongo以及MQ
redis允许局域网访问其实很简单.网上一堆都不怎么靠谱. 特此记录一下. 可参考此篇 假设A B 两台机器 在B(ip:192.168.1.99)机器上修改redis配置文件 bind 192.16 ...