zoukankan      html  css  js  c++  java
  • 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 这个方法,这个需要注意一下

  • 相关阅读:
    Java中的几种常用循环 for switch while dowhile
    HTML的各种基本标签
    2017年终总结
    HTML C# ajax结合ashx处理程序实现文件上传
    HTML div鼠标悬停控制子控件显示与隐藏
    HTML 使用CSS 如何去掉文本聚焦框
    HTML input 文本框如何添加提示信息
    CSS 如何通过top left 定位控制div在另一个div的位置
    CSS background 属性
    php支付接口开发-支付宝-开发前期准备
  • 原文地址:https://www.cnblogs.com/leiting/p/9288446.html
Copyright © 2011-2022 走看看