前端将file文件传给后台,后台将文件传给前台(包含上传下载)

前端将file文件传给后台,后台将文件传给前台(包含上传下载)

在开发过程中,经常会遇见对文件的处理。

例如:在上传、下载文件时,需要在前端选完文件传到后台传到服务器;或者文件从后台,经过特定需求的处理在返回给前台。

中间处理过程各种各样,但有两个过程是固定的

  • 前端传给后台
  • 后台返回给前端

经常用到的上传就是对应第一步,下载对应第二部。会在文章最后总结。

下面是示例代码

  1. 前台传给后台

    界面采用el-upload组件,在选择文件时,将文件传给后台

    <el-upload class="upload-demo" ref="upload" action="#" :on-change="changeFile" :file-list="fileList" :auto-upload="false" :limit="1"><el-button slot="trigger" size="small" type="primary">选取文档</el-button>
    </el-upload>
    

    选择完文件会走changeFile(file)方法,其中默认入参为选中的文件,如下图,真正的文件类型是File类型的raw变量
    在这里插入图片描述

    不能直接将File类型变量传输,要把File文件转成FormData类型,通过axios发送请求

    用的组件不同可能返回的类型、变量名不一样,但最后要获取到File文件类型,通过FormData()进行转换传向后台。

    需要配置的参数:

    • method:post
    • url:自己的接口地址
    • data:请求前转换类型的参数
    • headers:credentials: ‘same-origin’
    • responseType:‘blob’ //用于接收后台返回的文件所需类型
    //el-upload文件上传事件
    changeFile(file) {let formData = new FormData()formData.append('file', file.raw)// 传文件axios({method: 'post',url: url, //此处为往后台发送请求的地址data: formData,headers: {// "Content-Type": "multipart/form-data" credentials: 'same-origin'},timeout: 20000,//设置返回接受类型为blobresponseType: 'blob'}).then(res => {//返回值转成Blob类型let blob = new Blob([res.data])});
    },
    

    后端用MultipartFile类接收,并且获取HttpServletRequestHttpServletResponse参数,看下controller层的代码

    @PostMapping("transferFile")
    public void transferFile(MultipartFile file, HttpServletRequest request, HttpServletResponse response) throws Exception {deptService.transferFile(file, request, response);
    }
    

    可以看到成功获取到在前台选择的文件
    在这里插入图片描述

    那后台怎么返回给前台呢

  2. 后台将文件传给前台

    接着上面,看下service实现类的代码

    @Override
    public void transferFile(MultipartFile file, HttpServletRequest request, HttpServletResponse response) throws IOException {InputStream inputStream = file.getInputStream();String fileName = file.getOriginalFilename();/***	此处可以对文件输入流按照需求进行【自定义操作】*	操作完后也要返回一个字节数组*/byte[] bytes = new byte[1024];inputStream.read(bytes);try {response.setCharacterEncoding("UTF-8");//设置ContentType字段告知浏览器返回内容类型response.setContentType("application/octet-stream");//设置Header字段//下面这行代码必须加,否则前端获取不到Content-Disposition字段,即无法获取文件名response.setHeader("Content-Disposition", "attachment;filename=" + URLEncoder.encode(fileName, "UTF-8"));ServletOutputStream out = response.getOutputStream();out.write(bytes);out.flush();out.close();} catch (Exception e) {} finally {inputStream.close();}
    }
    

    看上面代码,通过file.getInputStream()方法获取到文件的输入流,在调用read()方法,将其读到字节数组中,response.setContentType("application/octet-stream")设置返回值类型。通过response.getOutputStream()方法,获取返回的输出流,调用write将刚才读到处理完的字节数组写入,最后将流关闭。

    中间部分可以对流进行自定义操作,操作完成后返回字节数组,写到response的输出流中即可

    例如该项目中会将doc文件的流转成docx格式的流,感兴趣的可以看之后的文章。

    接口执行完成,前端将返回值转成Blob类型,且发送请求时已经设置了responseType为'blob'。如下图两处关键点。
    在这里插入图片描述

到此文件前后台之间的传输过程就全部结束。

此处介绍的是个完整的过程,对于上传和下载其实是两步拆开单独对应。

  • 上传

    完整的对应第一步骤:选择文件->传递给后台->后台转成流调用第三方接口上传到文件服务器

  • 下载

    通常从后台调用第三方接口获取文件,一般会以流的形式返回,此时为输入流,然后拿到response的输出流,写入。

    获取远程文件输入流->写入响应参数的输出流

    ServletOutputStream out = response.getOutputStream();
    out.write(bytes);
    

    com.google.api.client.util下有个工具类可以直接实现流之间的复制,省去多样步骤

    IOUtils.copy(inputStream, response.getOutputStream());

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/109809.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

RTSP/Onvif协议安防视频平台EasyNVR录像模式自定义操作

TSINGSEE青犀视频安防监控平台EasyNVR可支持设备通过RTSP/Onvif流媒体协议接入&#xff0c;并能对接入的视频流进行处理与多端分发&#xff0c;包括RTSP、RTMP、HTTP-FLV、WS-FLV、HLS、WebRTC等多种格式。在智慧安防等视频监控场景中&#xff0c;EasyNVR可提供视频实时监控直播…

linux并发服务器 —— 动态库和静态库实战(一)

-E 预处理指定源文件 -S 编译指定源文件 -c 汇编指定源文件 -o 生成可执行文件 -I directory 指定Include包含文件的搜索目录 -g 编译的时候生成调试信息 -D 在程序编译时指定一个宏 -w 不生成任何的警告信息 -Wall 生成所有警告 -On n:0~3&#xff1b;表示编译器的优…

pip install bz2 和readline失败

python3.7.5 在跑模型时报错找不到bz2,使用pip install bz2 安装失败 bz2和readline应该是python自带的包 解决方案&#xff1a;重新编译安装python3.7.5,参考&#xff1a; https://www.hiascend.com/document/detail/zh/CANNCommunityEdition/70RC1alpha002/softwareinstall/…

Android工具条

在底层&#xff0c;所有通过主题得到应用条的活动都使用ActionBar类实现它的应用条。不过最新的应用条特性已经增加到AppCompat支持库中的Toolbar类。这意味着&#xff0c;如果你想在应用中使用最新的应用条特性&#xff0c;就需要使用支持库中的ToolBar类。 如何增加工具条 1…

❤ windows 安装后台java开发环境JDK 、MySQL 、Redis

❤ windows 安装后台java开发环境 1、windows 安装 JDK. 下载地址&#xff1a; http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html 1、下载安装 官网点击下载安装 网盘 jdk安装包 链接&#xff1a;https://pan.baidu.com/s/1sdxA6B…

Linux学习之DNS服务的原理

DNS服务一些理论 域名系统&#xff08;Domain Name System&#xff0c;DNS&#xff09;是互联网的核心应用服务&#xff0c;可以通过IP地址查询到域名&#xff0c;也可以通过域名查询到IP地址。 FQDN&#xff08;Full Qualified Domain Name&#xff09;是完全限定域名&#xf…

【ES6】—【新特性】—Symbol详情

一、一种新的原始数据类型 定义&#xff1a;独一无二的字符串 二、 声明方式 1. 无描述声明 let s1 Symbol() let s2 Symbol() console.log(s1, s2) // Symbol() Symbol() console.log(s1 s2) // falsePS: Symbol 声明的值是独一无二的 2. 有描述的声明 let s1 Symb…

【如何对公司网络进行限速?一个案例详解】

有不少朋友问到了关于企业网络QoS配置&#xff0c;这个确实在实际网络应用中非常多&#xff0c;基本上大部分企业或个人都用到这个功能&#xff0c;本期我们详细了解下QoS如何对宽带进行限制&#xff0c;QoS如何企业中应用。 一、什么是QoS? Qos是用来解决网络延迟和阻塞等问…

【微信红包】Axure聊天发红包原型图,含流程图和PRD产品文档

作品概况 页面数量&#xff1a;共 60 页 兼容软件&#xff1a;Axure RP 9/10&#xff0c;不支持低版本 应用领域&#xff1a;聊天软件、社交软件 作品申明&#xff1a;页面内容仅用于功能演示&#xff0c;无实际功能 作品特色 本作品为「发红包」的原型设计图&#xff0c…

为什么网络互联地址设置为30位地址

对于点对点链路&#xff0c;为了节约IPv4地址&#xff0c;一般为其分配/30地址块&#xff0c;这样包含4个地址&#xff1a;最小地址作为网络地址&#xff0c;最大地址作为广播地址&#xff0c;剩余两个可分配地址&#xff0c;分配给链路两端的接口&#xff0c;这是最普遍的方法…

《网络是怎样连接的》(五)

本文主要取材于 《网络是怎样连接的》 第五章。 目录 5.1 Web服务器的部署地点 5.2 防火墙的结构和原理 5.3服务器负载平衡 5.4 使用缓存服务器分担负载 5.5 内容分发服务 简述&#xff1a;本文主要内容是解释 网络包如何朝服务器前进&#xff0c;并通过服务器前面的防…

php_webshell免杀--从0改造你的AntSword

0x00 前言&#xff1a; 为什么会有改造蚁剑的想法&#xff0c;之前看到有做冰蝎的流量加密&#xff0c;来看到绕过waf&#xff0c;改造一些弱特征&#xff0c;通过流量转换&#xff0c;跳过密钥交互。 但是&#xff0c;冰蝎需要反编译去改造源码&#xff0c;再进行修复bug&am…

pytorch中torch.gather()简单理解

1.作用 从输入张量中按照指定维度进行索引采集操作&#xff0c;返回值是一个新的张量&#xff0c;形状与 index 张量相同&#xff0c;根据指定的索引从输入张量中采集对应的元素。 2.问题 该函数的主要问题主要在dim维度上&#xff0c;dim0 表示沿着第一个维度&#xff08;行…

【算法日志】动态规划刷题:完全背包应用问题(day39)

代码随想录刷题60Day 目录 前言 零钱兑换 完全平方数 前言 今天重点是对完全背包问题进一步了解&#xff0c;难度不大&#xff0c;重点是区分与其他背包问题在初始和遍历上的一些细节。 零钱兑换 int coinChange(vector<int>& coins, int amount) {if (!amount)re…

linux————keepalived+LVS(DR模式)

一、作用 使用keepalived解决LVS的单点故障 高可用集群 二、 调度器配置 环境 两台LVS服务 一主一备 两台web服务 采用nginx &#xff08;实现LVS负载均衡&#xff09; 服务ip 主LVS 192.168.100.3 备LVS 192.168.100.6 web1 192.…

docker在阿里云上的镜像仓库管理

目录 一.登录进入阿里云网站&#xff0c;点击个人实例进行创建 二.创建仓库&#xff0c;填写相关信息 三.在访问凭证中设置固定密码用于登录&#xff0c;登录时用户名是使用你注册阿里云的账号名称&#xff0c;密码使用设置的固定密码 四.为镜像打标签并推送到仓库 五.拉取…

xsschallenge通关(11-15)

level 11 老规矩&#xff0c;先查看源码&#xff0c;做代码审计&#xff1a; <?php ini_set("display_errors", 0); $str $_GET["keyword"]; $str00 $_GET["t_sort"]; $str11$_SERVER[HTTP_REFERER]; $str22str_replace(">&quo…

1. 深度学习介绍

1.1 AI地图 ① 如下图所示&#xff0c;X轴是不同的模式&#xff0c;最早的是符号学&#xff0c;然后概率模型、机器学习。Y轴是我们想做什么东西&#xff0c;感知是我了解这是什么东西&#xff0c;推理形成自己的知识&#xff0c;然后做规划。 ② 感知类似我能看到前面有个屏…

头条移动端项目Day06 —— kafka及异步通知文章上下架

❤ 作者主页&#xff1a;欢迎来到我的技术博客&#x1f60e; ❀ 个人介绍&#xff1a;大家好&#xff0c;本人热衷于Java后端开发&#xff0c;欢迎来交流学习哦&#xff01;(&#xffe3;▽&#xffe3;)~* &#x1f34a; 如果文章对您有帮助&#xff0c;记得关注、点赞、收藏、…