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 ...
随机推荐
- Python批量改文件名
对以下路径中的文件名批量修改. 一.读取指定路径中的文件名 #导入标准库 import os #读取文件名 filesDir = "路径--" fileNameList = os. ...
- 【UniApp】-uni-app-全局数据和局部数据
前言 好,经过上个章节的介绍完毕之后,了解了一下 uni-app-全局样式和局部样式 那么了解完了全局样式和局部样式之后,这篇文章我再来给大家介绍一下 UniApp 中全局数据和局部数据 搭建演示环境 ...
- jvm的jshell,学生的工具
jshell 在我眼里,只能作为学校教学的一个玩具,事实上官方也做了解释,以下是官方的解释: 在学习编程语言时,即时反馈很重要,并且 它的 API.学校引用远离Java的首要原因 教学语言是其他语言 ...
- Socket是什么/怎么理解Socket
Socket 先来看一下百度百科对于Socket的介绍:套接字(socket)是一个抽象层,应用程序可以通过它发送或接收数据,可对其进行像对文件一样的打开.读写和关闭等操作.套接字允许应用程序将I/O ...
- Java五种设计模式实现奶茶订单生成系统小DEMO
前言 这是大学时候上设计模式这门课写的程序,当时课程任务是要求结合五个设计模式写一个系统,最近偶然翻到,把系统分享一下. 成品预览 主界面 功能介绍 订单管理系统,实现了对订单的增删改查.且实现了 ...
- python操作mongodb副本集(mongodb高可用)
https://pymongo.readthedocs.io/en/stable/examples/high_availability.html# pymongo比较"智能",只要 ...
- ios上架流程 详细通关教程 2021
记录此文是源于以下需求 1.已有app store开发者账号 (公司账号$99),需上架至app store 2.有商城实体商品支付功能(会员等虚拟支付另说) 3.有硬件交互功能 注:建议预留一周上架 ...
- 从零玩转系列之微信支付实战PC端支付微信退款接口搭建 | 技术创作特训营第一期
一.前言 从零玩转系列之微信支付实战PC端支付微信退款接口搭建 | 技术创作特训营第一期 继前文章取消订单接口和查询订单接口此篇为申请退款流程,此篇文章过长我将分几个阶段的文章发布(项目源码都有,小程 ...
- electron入门之配置镜像加速(四)
electron入门到入土,配置阿里镜像加速.为了防止后面我们打包龟速,需要给electron配置阿里镜像加速 在下面的文件内添加阿里镜像加速,你的文件位置不一定是这个 C:\Program File ...
- Tpon 1.0 一键查询网站存在过的路径
Tpon 1.0 寻找网站存在过的路径 该工具能够让你发现意料之外的路径 工具描述 编写该工具旨在寻找网站存在过的网站路径,这个地址可能是机器爬下来的也可能是某些人访问过的,在表面你可能看不到它的入口 ...