精华内容
下载资源
问答
  • 接口接收多个文件
    千次阅读
    2020-12-21 12:42:24

    媒介

    项目中经常会碰到须要导出列表内容,或许下载文件之类的需求。连系各种状况,我总结了前端最经常运用的三种要领来接收后端传过来的文件流并下载,针对差别的状况能够运用差别的要领。

    要领一

    运用场景

    针对后端的get要求

    详细完成

    下载文件

    直接用个标签来接收后端的文件流

    要领二

    运用场景

    针对后端的post要求

    应用原生的XMLHttpRequest要领完成

    详细完成

    function request () {

    const req = new XMLHttpRequest();

    req.open('POST', '', true);

    req.responseType = 'blob';

    req.setRequestHeader('Content-Type', 'application/json');

    req.onload = function() {

    const data = req.response;

    const a = document.createElement('a');

    const blob = new Blob([data]);

    const blobUrl = window.URL.createObjectURL(blob);

    download(blobUrl) ;

    };

    req.send('');

    };

    function download(blobUrl) {

    const a = document.createElement('a');

    a.style.display = 'none';

    a.download = '';

    a.href = blobUrl;

    a.click();

    document.body.removeChild(a);

    }

    request();

    要领三

    运用场景

    针对后端的post要求

    应用原生的fetch要领完成

    详细完成

    function request() {

    fetch('', {

    method: 'POST',

    headers: {

    'Content-Type': 'application/json',

    },

    body: '',

    })

    .then(res => res.blob())

    .then(data => {

    let blobUrl = window.URL.createObjectURL(data);

    download(blobUrl);

    });

    }

    function download(blobUrl) {

    const a = document.createElement('a');

    a.style.display = 'none';

    a.download = '';

    a.href = blobUrl;

    a.click();

    document.body.removeChild(a);

    }

    request();

    总结

    假如后端供应的下载接口是get范例,能够直接运用要领一,简朴又便利;固然假如想运用要领二、三也是能够的,不过觉得有点舍本逐末了。

    假如后端供应的下载接口是post范例,就必须要用要领二或许要领三了。

    要领二和要领三怎样弃取?

    当你的项目里的接口要求满是基于XMLHttpRequest完成的,这时候要领二就越发合适,只需基于你本来项目中的接口要求东西类加以扩大就好了。

    当你的项目里的接口要求满是基于fetch完成的,这时候要领三就越发合适,比方我如今的做的一个项目就是基于ant design pro的背景治理体系,它内里的要求类就是基于fetch的,所以我就直接用的要领三,只需在它的request.js文件中稍作修正就行。

    我这里议论的是两种原生的要求体式格局,假如你项目中引用了第三方要求包来发送要求,比方axios之类的,那就要另当别论了。

    更多相关内容
  •   最近手头项目有个接口,需要同时接收多个图片文件上传,并且还要接收一个入参对象,记录一下接收的方式;   在下图中的接口中,没有添加@RequestBody注解,因为前端在传递参数的时候,消息头中的content-type...

      最近手头项目有个接口,需要同时接收多个图片文件上传,并且还要接收一个入参对象,记录一下接收的方式;

      在下图中的接口中,没有添加@RequestBody注解,因为前端在传递参数的时候,消息头中的content-type定义了消息体的请求格式,如果使用了@RequestBody注解,则消息体只能是application/josn,而这里接收多文件,所以消息体的请求格式应该是Content-Type:multipart/form-data
    在这里插入图片描述
      需要注意的是:@Valid注解可以正常使用

    测试

    在这里插入图片描述
    在这里插入图片描述

    展开全文
  • 为完成客户要求,且不重新设计架构,所以重新修改新增项目的接口,让新增项目时接口接收项目实体类和文件以及部分单独字段属性。 后端解决方法 @ApiOperation(value = "接口名称") @PostMapping

    一个接口同时接收JSON实体、文件和单个属性

    在做一个项目时,客户临时改要求。原本跟项目有关的文件是在项目生成之后,以项目ID为关联点,上传的文件为某个项目的某种类型文件,但客户新增在新增项目时,也可以上传文件,这时上传的文件就没有项目ID,这就跟原本已经设计好的数据库和架构起了一个小冲突。为完成客户要求,且不重新设计架构,所以重新修改新增项目的接口,让新增项目时接口接收项目实体类和文件以及部分单独字段属性。

    后端解决方法

    @ApiOperation(value = "接口名称")
    @PostMapping("/接口地址")
    public AjaxResult addItem(@RequestPart("itemBaseInfo") @Valid  ItemBaseInfo itemBaseInfo,
                              @RequestParam(required = false, value = "files") MultipartFile[] files,
                              @RequestParam(required = false, value = "commentType ") String commentType ) {
            logger.info("-----------接口名称start-----------");
    

    说明:
    1.前端接口上传文件的时候,通常会将请求header的content-type设置为:multipart/form-data, 或者form表单提交的时候将enctype设置为"multipart/form-data" 。

    2.后端收到请求时由于请求体有@RequestBody 注解标识,通常会用application/json, application/xml处理content-type,此时会报编码格式的问题。这时候可以使用@RequestPart参数来接收实体对象,@RequestParam来单个接收参数。

    3.@RequestPart这个注解用在multipart/form-data表单提交请求的方法上。

    4.@RequestParam也同样支持multipart/form-data请求。

    5.@RequestParam和@RequestPart的区别是:@RequestParam适用于name-valueString类型的请求域,@RequestPart适用于复杂的请求域(像JSON,XML)

    6.@Valid和@Validate注解的使用

    postman测试样例

    在这里插入图片描述

    采用以上方式后前端报错

    前端调用后端接口时,通过xshell日志,发现Conten type ‘application/octet-stream’ not supported
    在这里插入图片描述

    前端解决方法

    handleCreate() { // 确认创建会议方法
          this.form.validateFields((err, values) => {
            if (!err) {
              console.log(this.files[0])
              let formData = new FormData()
              for (let i = 0; i <this.files.length; i++) {
                formData.append('files', this.files[i]) // 上传的文件
              }
              let itemBaseInfo={ // 项目的信息
              itemName:values.itemName
              .......
            }
             //核心start
              itemBaseInfo=JSON.stringify(itemBaseInfo)
              itemBaseInfo=new Blob([itemBaseInfo],{type: "application/json"}) // 设置文件类型   Blob:文件流
              formData.append('itemBaseInfo',itemBaseInfo)
             //核心end
              let queryParam={
                commentType:this.commentType,
                ......
              }
              addItem(storage.get(ACCESS_TOKEN),queryParam, formData).then(res => {
                console.log(res)
                if (res.code === 200) { // 创建成功
                  this.$message.success('创建成功')
                  this.$router.push({ path: '/xxx' })
                } else if (res.code === 401) {
                  storage.remove(ACCESS_TOKEN)
                  this.$router.push({ path: '/xxxx' })
                } else {
                  this.$message.error('创建失败')
                }
              })
            }
          })
        },
    

    展开全文
  • MyBatis中mapper文件对应的接口类方法如何接收查询语句返回的多个

    MyBatis中mapper文件对应的接口类方法如何接收查询语句返回的多个值。当mapper映射文件中的查询方法返回多个值的时候,如何在对应的接口中编写方法接收返回的多个值?可以使用集合类来进行接收。

    例1:通过多个标签名称查询便签名称所对应的id主键
    在这里插入图片描述
    映射文件对应的查询语句如下:

    <select id="getTagsIdByTagName" resultType="long">
        select id from tags where tagName in
        <foreach collection="tagNames" item="tagName" separator="," open="(" close=")">
            #{tagName}
        </foreach>
    </select>
    

    上面的select查询语句会返回多个int值,所以在接口方法中需要返回List集合,接口方法如下:

    /**
      * 通过标签名称获取标签id
      * @param tagNames
      * @return 因为查询到的标签id是int类型而且不止一个,所以使用list数组来存储查询到的标签id
      */
     List<Long> getTagsIdByTagName(@Param("tagNames") String[] tagNames);
    

    例2:获取数据库中的多个日期值
    在这里插入图片描述
    映射文件对应的查询语句如下:

    <select id="getCategories" resultType="String" parameterType="long">
        SELECT countDate from pv WHERE uid=#{uid} ORDER by countDate limit 7
    </select>
    

    上面的select查询语句会返回多个日期值,所以在接口方法中需要返回List集合,日期的泛型是String,接口方法如下:

    List<String> getCategories(Long uid);
    
    展开全文
  • HttpClient Post提交多文件多个普通参数,已经封装成工具类。 需传入 要请求的url 普通参数map 例 map.put("param1","张三"); 需要传入的文件流map 其中key为文件名 服务端接收无乱码。
  • python requests接收多个同name文件

    千次阅读 2019-05-09 17:19:03
    需要向服务器发送多个同name的文件,如何发送请求 2.服务器后端如何接收到这些同name文件 发送请求样例 requests.post( url=”http://localhost:8080/test", data={'name':'xiaoming', 'age':18}, ...
  • 最近在研究Mybatis-plus事务处理的过程中,遇到一问题,就是我需要在前台传到controller两实体对象,...一、修改Controller类中的方法1、创建一临时的类用于接收参数,当前类需要有两public属性的实体。代...
  • java后台控制层接收复杂参数(集合对象,多个文件对象) 1.接收集合对象 创建一个类,然后将要接收的集合对象作为一个属性就行,控制层加个@RequestBody 代码如下: 接收实体类 package cn.mindgd.dto; import ...
  • } 后端接收文件 以及接收多个参数 将文件定义成一个类的属性,将参数也定义成类的属性,如此 接收参数 和文件 实体类 entity FileSaveReqVO.java @ApiModelProperty(value = "上传的文件", required = true) @Not...
  • 今天接到一任务是要写一上传文件同时还带有一json数据的请求接口。先来分析一下,后端需要两参数,一参数用来接收上传文件,另一参数用来接收json数据。后端接收文件可以采用MultipartFile来接收,json...
  • 遇到一需要接收上传文件,并且转发到其他服务的一需求。 接收文件比较简单,但是对于转发有点迷惑。后次调试后成功: public Object request(HttpServletRequest servletRequest){ String address = ...
  • java接口接收二进制流

    千次阅读 2021-04-17 11:12:09
    RF 读写器 JAVA 接口用户手册 1....因为图片是二进制文件,则只能用字节流 File f1=new...System.out 是指标准输出,通常与计算机的接口设备有...Java 的流式输入/输出建立在四抽象类的基础上: ......我是...
  • JAVA项目同时上传多个文件和多个内容   首先这俩问题是由一个功能引发的,最近项目中有这样的要求,前端要上传多个文件用于地图描绘那些东西,但只是为了拼到地图上查看一下,并不做保存,这就引发了我的纠结,...
  • Spring Boot多文件和表单数据接收(uniapp多文件和表单上传) 背景 一名可爱的后端在开开心心的写着接口 public String api(@RequestPart("files") MultipartFile[] files, @RequestPart("form") From form) ...
  • Postman中binary传递文件后台怎么接收

    千次阅读 2021-06-17 23:27:19
    @PostMapping(value = "getData") @ResponseBody public String getData( HttpServletRequest request) { BufferedReader br = null; try { br = new BufferedReader(new InputStreamReader(request....
  • 文章目录FastAPI 接收文件上传示例1:接受单个 bytes 数据示例2:修改 files 格式示例3:接收多个 bytes 文件示例4:UploadFile 格式接收文件 本文主要测试使用 FastAPI 编写接收文件接口,使用 requests 库请求...
  • 项目中遇到一问题,就是前端只调用一次接口,传递很字段到后台,包括文件。后台用一接收文件作为类的一属性:controller中接收,不能加@RequestBody注解,因为该注解的解析方式是按照json体解析的,但是...
  • 别人原接口文档是这样写的,现在这格式的传参,哪位指导下,后端接口的格式是在是搞不定。
  • C#接口接收json数据处理

    千次阅读 2021-03-03 20:54:22
    项目场景: 写接口遇到购物车一次性结算件商品,前端会返回一商品集合如下: 文档: "gift_list":[{ //需要兑换礼品集合 "cash_gift_id":"" "count":"" },{ "cash_gift_id":"
  • 使用别人开发的一个post接口,发现该接口请求参数有多个,并且其中一个参数是用@ReuqestBody注解修饰的。对于这种请求参数,使用postman时不知如何请求 二、Postman不同接口的请求方式介绍 2.1 接收Form表单数据 ...
  • ​ 我们都知道,在Mybatis中的Mapper.xml映射文件可以定制动态SQL,在dao层定义的接口中定义的参数传到xml文件中之后,在查询之前mybatis会对其进行动态解析,通常使用#{}接收,下面介绍几种比较常用的用法。...
  • 使用Map接口传递多个参数

    千次阅读 2019-06-15 19:39:52
    使用Map接口传递多个参数 在实际开发中,查询SQL语句经常需要多个参数,列如多条件查询 在MyBatis中允许使用Map接口通过键值对传递多个参数 ![在映射文件中的代码] 实际上,使用Map不能限定其传递的数据类型,所以...
  • 项目过程中,经常会有和第三方接口打交道的过程,今天实现调用第三方上传文件接口!! 个人小习惯与君分享: 通常拿到第三方的接口文档的时候,不是第一时间先写代码,而是详细阅读接口文档。若接口需要第三方提供...
  • 前言 只需在Dao层添加注解 Mapper文件 ... 但是mapper中接收的paramType一般是“String”或者一实体,没有出现接收参数的情况。通过查找博客分析思路,找到了一非常方便的注解@Param。...
  • 多文件上传以及Java后台接受

    千次阅读 2021-02-26 16:22:33
    最近项目用到的,实现多文件以及一些...上传文件首先解释下action中的地址为我后台接受文件的地址,因为上传文件,所以enctype="multipart/form-data"是必须的同时选择多个文件上传,不使用各种控件的话,把multiple...
  • uniapp前端单文件上传JAVA后台接收实现(亲测),看了些文档,亲测了一天,后面还有页面上传文档代码上传哦
  • 在第二篇博客中,讲了如何创建一API接口,接下来我们要给这API接口加上参数,处理后返回处理过的数据,同时还会讲如何优雅的对入参进行校验 1.打开TestController类,修改test方法 @Controller @RequestMappi...
  • 大家好我是菜鸟阿贵,最近接手一项目是改动一些功能需求,大概就是将程序中添加一个接口,供别人调用,出发HTTP请求,将数据发送给我! 那么我们该如何实现呢? 1:首先因为涉及隐私我就不再公司程序中的代码中...
  • 应用场景:用postman、apifox测试时请求python接口,python接口接收上送过来文件对象 下面截图是apifox上送的文件对象 python接口中,接收此文件对象 # -*- coding:utf-8 -*- from flask import Flask, request, ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 600,044
精华内容 240,017
热门标签
关键字:

接口接收多个文件