springboot 实现接收前端发来的图片和视频以及在页面上展示图片和视频
springboot 实现接收前端发来的图片和视频以及在页面上展示图片和视频
一、效果:
1、上传图片

2、显示上传的图片

3、上传的视频

4、显示上传的视频

二、代码
没依赖特殊的包,引入springweb就行
1、配置文件:
# 应用名称
spring.application.name=demo
# 应用服务 WEB 访问端口
server.port=8080 #设置上传文件大小,默认是1M
spring.servlet.multipart.max-request-size=200MB
spring.servlet.multipart.max-file-size=200MB
2、controller类:
package com.example.demo; import org.springframework.web.bind.annotation.*;
import org.springframework.web.multipart.MultipartFile;
import javax.servlet.http.HttpServletResponse;
import java.io.File;
import java.io.FileInputStream;
import java.io.IOException;
import java.io.OutputStream; /**
* <p>描述: 图片和视频上传和查看。</p>
* <p>文件名称: Controller.java</p>
* <p>创建时间: 2022-07-08 </p>
* @author 万笑佛
* @since 2022-07-08
*/ @RestController
@RequestMapping("/editor")
public class Controller { /**
* 图片上传。
*
* @param fileUpload
* @return JSONObject
*/
@PostMapping(value = "/image/upload" )
@ResponseBody
public void imageUpload(@RequestParam("file") MultipartFile fileUpload) { //获取文件名
String fileName = fileUpload.getOriginalFilename();
String tmpFilePath = "D://test//image//" ; //没有路径就创建路径
File tmp = new File(tmpFilePath);
if (!tmp.exists()) {
tmp.mkdirs();
}
String resourcesPath = tmpFilePath + "//" + fileName; File upFile = new File(resourcesPath);
try {
fileUpload.transferTo(upFile);
} catch (IOException e) {
e.printStackTrace();
} } /**
* 图片查看。 * @return String
*/
@GetMapping("/image/look")
public String imageLook (HttpServletResponse response) { File file = new File("D:\\test\\image\\1.png");
byte[] bytes = new byte[1024];
try (OutputStream os = response.getOutputStream();
FileInputStream fis = new FileInputStream(file)){
while ((fis.read(bytes)) != -1) {
os.write(bytes);
os.flush();
}
} catch (IOException e) {
e.printStackTrace();
}
return "success";
} /**
* 视频上传。
*
* @param fileUpload
* @return JSONObject
*/
@PostMapping(value = "/video/upload" )
@ResponseBody
public void videoUpload(@RequestParam("file") MultipartFile fileUpload) { //获取文件名
String fileName = fileUpload.getOriginalFilename();
String tmpFilePath = "D://test//video//" ;
//没有路径就创建路径
File tmp = new File(tmpFilePath);
if (!tmp.exists()) {
tmp.mkdirs();
}
String resourcesPath = tmpFilePath + "//" + fileName;
File upFile = new File(resourcesPath);
try {
fileUpload.transferTo(upFile);
} catch (IOException e) {
e.printStackTrace();
} } /**
* 视频查看。 * @return String
*/
@GetMapping("/video/look")
public String videoLook (HttpServletResponse response) {
File file = new File("D:\\test\\video\\1.mp4");
byte[] bytes = new byte[1024];
try (OutputStream os = response.getOutputStream();
FileInputStream fis = new FileInputStream(file)){
while ((fis.read(bytes)) != -1) {
os.write(bytes);
os.flush();
}
} catch (IOException e) {
e.printStackTrace();
}
return "success";
} }
推荐一个适合零基础学习SQL的网站:不用安装数据库,在线轻松学习SQL!
springboot 实现接收前端发来的图片和视频以及在页面上展示图片和视频的更多相关文章
- web页面上展示图片时,图片不显示,报错:ERR_CONTENT_LENGTH_MISMATCH
问题描述 前端页面加载css,和js文件的时候,经常出现ERR_CONTENT_LENGTH_MISMATCH的报错情况. 查找问题 在单独打开hearder中css,js的网络地址是能打开的 ...
- 使用 jQuery 操作页面元素的方法,实现浏览大图片的效果,在页面上插入一幅小图片,当鼠标悬停到小图片上时,在小图片的右侧出现与之相对应的大图片
查看本章节 查看作业目录 需求说明: 使用 jQuery 操作页面元素的方法,实现浏览大图片的效果,在页面上插入一幅小图片,当鼠标悬停到小图片上时,在小图片的右侧出现与之相对应的大图片 实现思路: 在 ...
- 使用JavaScript 中的Math对象和勾股定理公式,计算鼠标的位置与页面图片中心点的距离,根据距离对页面上的图片进行放大或缩小处理。距离远时图片放大,距离近时图片缩小
查看本章节 查看作业目录 需求说明: 使用JavaScript 中的Math对象和勾股定理公式,计算鼠标的位置与页面图片中心点的距离,根据距离对页面上的图片进行放大或缩小处理.距离远时图片放大,距离近 ...
- SpringBoot 后端接收前端传值的方法
1.通过HttpServletRequest接收,适用于GET 和 POST请求方式 通过HttpServletRequest对象获取请求参数 @RestController @Reque ...
- 一段实现页面上的图片延时加载的js
大家如果使用firebug去查看的话就会发现,当你滚动到相应的行时,当前行的图片才即时加载的,这样子的话页面在打开只加可视区域的图片,而其它隐藏的图片则不加载,一定程序上加快了页面加载的速度,对于比较 ...
- 前端H5,点击选择图片控件,图片直接在页面上展示~
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- javaweb页面上展示动态图片
HTML <img alt="点击设定" name="CONSTRUCTIONPLANHIS_IMAGE_curr_img_0" src="vi ...
- Python Django CMDB项目实战之-3创建form表单,并在前端页面上展示
基于之前的项目代码 Python Django CMDB项目实战之-1如何开启一个Django-并设置base页.index页.文章页面 Python Django CMDB项目实战之-2创建APP. ...
- java 通过流的方式读取本地图片并显示在jsp 页面上(类型以jpg、png等结尾的图片)
Java代码: File filePic = new File(path+"1-ab1.png"); if(filePic.exists()){ FileInputStream i ...
- 关于springmvc 只能在index.jsp页面显示图片的处理办法jsp页面无法显示图片
首先,已经配置好了mvc对静态资源的处理 只有index,jsp可以显示图片 其他页面同样的代码则不显示 后来折腾了半天,发现 index是static的父目录的级别文件 可以向下访问 但是其他的js ...
随机推荐
- 什么是RPC协议
工作的时候,第一次接触CRPC协议,当时就很懵,啥是CRPC协议,一脸懵逼,于是就到网上去搜,填充知识空缺. 不少解释显得非常官方,我相信大家在各种平台上也都看到过,解释了又好像没解释,都在用一个我们 ...
- Spring整合Quartz简单入门
创建一个Web项目 导入相关jar包 <?xml version="1.0" encoding="UTF-8"?> <project xmln ...
- Lucas定理 、斯特灵公式
斯特灵公式是一条用来取n阶乘的近似值的数学公式. 公式为: 用该公式我们可以用来估算n阶乘的值:估算n阶乘的在任意进制下的位数. 如何计算在R进制下的位数:我们可以结合对数来计算,比如十进制就是lg( ...
- 数字孪生结合GIS能给物流行业带来怎样的改变
随着科技的不断发展和创新,数字孪生技术和地理信息系统(GIS)正日益在各个行业中发挥重要作用.其中,物流行业作为一个复杂而庞大的系统,也能从数字孪生和GIS的结合中获得许多益处和改变. 数字孪生是指通 ...
- python tkinter 使用(七)
python tkinter 使用(七) 本篇文章主要讲下tkinter 中的message 控件. Message控件可以用于在窗口中显示一段文本消息. 以下是个简单的例子: #!/usr/bin/ ...
- 集群化部署ZabbixServer
修改Zabbix-agent配置 1.修改配置文件 三台zabbix-Server上操作 vim /etc/zabbix/zabbix_agent2.conf Server=127.0.0.1 改成 ...
- Freezable ---探索WPF中Freezable承载数据的原理
引言 在之前写的一篇文章[WPF --- 如何以Binding方式隐藏DataGrid列]中,我先探索了 DataGridTextColumn 为什么不在可视化树结构内?又给出了解决方案,使用 Fre ...
- 华为云API Explorer重磅推出API编排,开发者0代码高效构建工作流
本文分享自华为云社区<华为云API Explorer重磅推出API编排,开发者0代码高效构建工作流(体验用户招募中)>,作者:华为云PaaS服务小智. 打破传统开发模式,API编排应运而生 ...
- 华为云FusionInsight MRS:千余节点滚动升级业务无中断
摘要:滚动升级作为大集群数据底座的必备能力,能够完美解决了传统大数据平台操作繁琐.业务停机.升级成本高等问题,实现一个架构的持续演进,业务无中断. 华为开发者大会2021(Cloud)大会期间,由华为 ...
- vue2升级vue3: 全局变量挂载与类型声明
全局变量挂载 vue2 Vue.prototype.$lm = {} vue3 const app = Vue.createApp({}) app.config.globalProperties.$l ...