基于Springboot外卖系统13:实现文件上传下载模块

1. 上传功能模块

1.1 上传概述

文件上传,也称为upload,是指将本地图片、视频、音频等文件上传到服务器上,可以供其他用户浏览或下载的过程。

文件上传时,对页面的form表单有如下要求:

表单属性取值说明
methodpost必须选择post方式提交
enctypemultipart/form-data采用multipart格式上传文件
typefile使用input的file控件上传

1.2 前端介绍

1). 简单html页面表单

<form method="post" action="/common/upload" enctype="multipart/form-data"><input name="myFile" type="file"  /><input type="submit" value="提交" /> 
</form>

2). ElementUI中提供的upload上传组件

目前一些前端组件库也提供了相应的上传组件,但是底层原理还是基于form表单的文件上传。

1.3 服务端介绍

服务端要接收客户端页面上传的文件,通常都会使用Apache的两个组件:

  • commons-fileupload

  • commons-io

而Spring框架在spring-web包中对文件上传进行了封装简化代码,只需要在Controller的方法中声明一个MultipartFile类型的参数即可接收上传的文件。

1.4 下载介绍

文件下载,也称为download,是指将文件从服务器传输到本地计算机的过程。通过浏览器进行文件下载,通常有两种表现形式:

1). 以附件形式下载,弹出保存对话框,将文件保存到指定磁盘目录

2). 直接在浏览器中打开

 通过浏览器进行文件下载,本质上就是服务端将文件以流的形式写回浏览器的过程。

1.5 上传功能模块逻辑分析

1.3.1 前端代码分析

对于前端页面文件上传,可以使用ElementUI提供的上传组件,将其拷贝到项目的目录(resources/backend/page/demo)下,启动项目,访问上传页面。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>文件上传</title><!-- 引入样式 --><link rel="stylesheet" href="../../plugins/element-ui/index.css" /><link rel="stylesheet" href="../../styles/common.css" /><link rel="stylesheet" href="../../styles/page.css" />
</head>
<body><div class="addBrand-container" id="food-add-app"><div class="container"><el-upload class="avatar-uploader"action="/common/upload":show-file-list="false":on-success="handleAvatarSuccess":before-upload="beforeUpload"ref="upload"><img v-if="imageUrl" :src="imageUrl" class="avatar"></img><i v-else class="el-icon-plus avatar-uploader-icon"></i></el-upload></div></div><!-- 开发环境版本,包含了有帮助的命令行警告 --><script src="../../plugins/vue/vue.js"></script><!-- 引入组件库 --><script src="../../plugins/element-ui/index.js"></script><!-- 引入axios --><script src="../../plugins/axios/axios.min.js"></script><script src="../../js/index.js"></script><script>new Vue({el: '#food-add-app',data() {return {imageUrl: ''}},methods: {handleAvatarSuccess (response, file, fileList) {this.imageUrl = `/common/download?name=${response.data}`},beforeUpload (file) {if(file){const suffix = file.name.split('.')[1]const size = file.size / 1024 / 1024 < 2if(['png','jpeg','jpg'].indexOf(suffix) < 0){this.$message.error('上传图片只支持 png、jpeg、jpg 格式!')this.$refs.upload.clearFiles()return false}if(!size){this.$message.error('上传文件大小不能超过 2MB!')return false}return file}}}})</script>
</body>
</html>

​http://localhost:8080/backend/page/demo/upload.html​

页面效果如下:

 在上述的浏览器抓取的网络请求中,上传文件的调用url,在哪里配置的呢,这个时候,我们需要去看一下前端上传组件。

 虽然上述是ElementUI封装的代码,但是实际上最终还通过file域上传文件,如果未指定上传文件的参数名,默认为file。

1.6 上传服务端代码逻辑

# 编写文件上传的方法, 通过MultipartFile类型的参数即可接收上传的文件, 方法形参的名称需要与页面的file域的name属性一致。

1). 获取文件的原始文件名, 通过原始文件名获取文件后缀

2). 通过UUID重新声明文件名, 文件名称重复造成文件覆盖

3). 创建文件存放目录

4). 将上传的临时文件转存到指定位置

2 下载功能模块

2.1 前端代码

文件下载,前端页面可以使用<img>标签展示下载的图片。

<img v-if="imageUrl" :src="imageUrl" class="avatar"></img>

解析通过<img>标签如何展示图片数据具体的流程:

在文件上传成功后,在 handleAvatarSuccess 方法中获取文件上传成功之后返回的数据(文件名),然后调用 /common/download?name=xxx 进行文件的下载。在这里,如果想让上传的照片能够在页面展示出来,所以需要在服务端将文件以流的形式写回浏览器。

2.2 下载功能模块逻辑分析

# 在 CommonController 中定义方法download,并接收页面传递的参数name,然后读取图片文件的数据,然后以流的形式写回浏览器。

1). 定义输入流,通过输入流读取文件内容

2). 通过response对象,获取到输出流

3). 通过response对象设置响应数据格式(image/jpeg)

4). 通过输入流读取文件数据,然后通过上述的输出流写回浏览器

5). 关闭资源

3 上传与下载服务端代码实现

1). application.yml (需要在application.yml中定义文件存储路径 )

server:# 端口设计port: 8080
spring:application:# 应用名称(可选)name: reggie_take_outdatasource:# 数据集druid:driver-class-name: com.mysql.cj.jdbc.Driverurl: jdbc:mysql://localhost:3306/reggie?serverTimezone=Asia/Shanghai&useUnicode=true&characterEncoding=utf-8&zeroDateTimeBehavior=convertToNull&useSSL=false&allowPublicKeyRetrieval=trueusername: rootpassword: 123456
mybatis-plus:configuration:#在映射实体或者属性时,将数据库中表名和字段名中的下划线去掉,按照驼峰命名法映射map-underscore-to-camel-case: truelog-impl: org.apache.ibatis.logging.stdout.StdOutImplglobal-config:db-config:# ID生成策略:ASSIGN_ID:可以在分布式的情况下使用,生成的是Long类型的数字,可以排序性能也高,但是生成的策略和服务器时间有关,如果修改了系统时间就有可能导致出现重复主键id-type: ASSIGN_IDreggie: # 需要在application.yml中定义文件存储路径path: D:\Java-Pro\reggie_take_out\file\

 2). CommonController

代码实现:

package com.itheima.reggie.controller;import com.itheima.reggie.common.R;
import lombok.extern.slf4j.Slf4j;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.web.bind.annotation.*;
import org.springframework.web.multipart.MultipartFile;import javax.servlet.ServletOutputStream;
import javax.servlet.http.HttpServletResponse;
import java.io.File;
import java.io.FileInputStream;
import java.io.FileNotFoundException;
import java.io.IOException;
import java.util.UUID;/*** Description: 文件的上传和下载* @date 2022/8/17 9:55*/@RestController
@RequestMapping("/common")
@Slf4j
public class CommonController {@Value("${reggie.path}")private String basePath;@PostMapping("upload")public R<String> upload(MultipartFile file){ // 这个名字必须和前端页面的name一样/**@Description: 文件上传* @version v1.0* @author LiBiGo* @date 2022/8/17 10:31*/// file 是一个临时文件 需要转存,不然运行结束自动删除log.info(file.toString());// 原始文件名String originalFilename = file.getOriginalFilename();// 获得原文件后缀String suffix =originalFilename.substring(originalFilename.lastIndexOf("."));// 使用UUID重新生成文件名,防止文件名称重复String fileName = UUID.randomUUID().toString() + suffix;// 创建目录对象File dir = new File(basePath);// 判断当前目录是否存在if(!dir.exists()){// 目录不存在,需要创建dir.mkdir();}try {file.transferTo(new File(basePath+fileName));} catch (IOException e){e.printStackTrace();}return R.success(fileName);}@GetMapping("/download")public void download(String name , HttpServletResponse response){/**@Description: 文件下载* @version v1.0* @author LiBiGo* @date 2022/8/17 10:31*/try {//输入流,通过输入流读取文件内容FileInputStream fileInputStream = new FileInputStream(new File(basePath + name));//输出流,通过输出流将文件写回浏览器ServletOutputStream outputStream = response.getOutputStream();response.setContentType("image/jpeg"); // 设置响应的文件格式,也可以不设置int len = 0;byte[] bytes = new byte[1024];while ((len = fileInputStream.read(bytes)) != -1){outputStream.write(bytes,0,len);outputStream.flush();}//关闭资源outputStream.close();fileInputStream.close();} catch (Exception e) {e.printStackTrace();}}
}

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

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

相关文章

hihoCoder #1143 : 骨牌覆盖问题·一

#1143 : 骨牌覆盖问题一 时间限制:10000ms单点时限:1000ms内存限制:256MB描述 骨牌&#xff0c;一种古老的玩具。今天我们要研究的是骨牌的覆盖问题&#xff1a;我们有一个2xN的长条形棋盘&#xff0c;然后用1x2的骨牌去覆盖整个棋盘。对于这个棋盘&#xff0c;一共有多少种不同…

关于CPU Cache -- 程序猿需要知道的那些事

关于CPU Cache -- 程序猿需要知道的那些事 本文将介绍一些作为程序猿或者IT从业者应该知道的CPU Cache相关的知识 文章欢迎转载&#xff0c;但转载时请保留本段文字&#xff0c;并置于文章的顶部 作者&#xff1a;卢钧轶(cenalulu) 本文原文地址&#xff1a;http://cenalulu.gi…

python线性回归代码_day-12 python实现简单线性回归和多元线性回归算法

1、问题引入 在统计学中&#xff0c;线性回归是利用称为线性回归方程的最小二乘函数对一个或多个自变量和因变量之间关系进行建模的一种回归分析。这种函数是一个或多个称为回归系数的模型参数的线性组合。一个带有一个自变量的线性回归方程代表一条直线。我们需要对线性回归结…

基于Springboot外卖系统14:菜品新增模块+多个数据表操作+文件上传下载复用

2.1 需求分析 后台系统中可以管理菜品信息&#xff0c;通过新增功能来添加一个新的菜品&#xff0c;在添加菜品时需要选择当前菜品所属的菜品分类&#xff0c;并且需要上传菜品图片&#xff0c;在移动端会按照菜品分类来展示对应的菜品信息 。 2.2 数据模型 新增菜品&#xff…

python层次聚类_python实现层次聚类

BAFIMINARMTO BA0662877255412996 FI6620295468268400 MI8772950754564138 NA2554687540219869 RM4122685642190669 TO9964001388696690 这是一个距离矩阵。不管是scipy还是fastcluster&#xff0c;都有一个计算距离矩阵的步骤&#xff08;也可以不用&#xff09;。距离矩阵是冗…

解析统计文本文件中的字符数、单词数、行数。

用android 编程解析统计文本文件中的字符数、单词数、行数&#xff08;作业&#xff09; 主要代码 ... private void analysis() { String str " "; int words 0; int chars 0; int lines 0; int spaces 0; int marks 0; int character 0; String filename e…

shell自动生成的文件有一个问号的后缀

写了一个脚本&#xff0c;自动处理一个文件。 rm -f session.log rm -f link wget ftp://hostname/f:/ddn/session.log egrep ^N[[:digit:]]|^D[1-4] session.log >>link egrep -c ^N[[:digit:]]|^D[1-4] session.log >>link egrep -v ACT/UP link>>link ls …

基于Springboot外卖系统15:菜品分页查询模块+根据类别ID填充类别信息

3.1 菜品分页查询功能需求分析 系统中的菜品数据很多的时候&#xff0c;如果在一个页面中全部展示出来会显得比较乱&#xff0c;不便于查看&#xff0c;所以一般的系统中都会以分页的方式来展示列表数据。 在菜品列表展示时&#xff0c;除了菜品的基本信息(名称、售价、售卖状…

python 3d渲染_python老司机带你玩玩炫酷的3D渲染,酷毙了!

自从学会了turtle模块后&#xff0c;画了不少简笔画。像小猪佩奇、哆啦A梦等等&#xff0c;但是这些依然不能让身边人感受到python的强大&#xff0c;依然是每次装逼必被打脸。就像你用turtle画了这个 别人拿出了这个 怎么办&#xff1f;面对函数库如此丰富的python&#xff0c…

Linux内存管理(最透彻的一篇)

摘要:本章首先以应用程序开发者的角度审视Linux的进程内存管理,在此基础上逐步深入到内核中讨论系统物理内存管理和内核内存的使用方法。力求从外到内、水到渠成地引导网友分析Linux的内存管理与使用。在本章最后,我们给出一个内存映射的实例,帮助网友们理解内核内存管理与…

基于Springboot外卖系统16:菜品修改模块+菜品信息回显+ID查询口味列表+组装数据并返回

4.1 菜品修改模块需求分析 在菜品管理列表页面点击修改按钮&#xff0c;跳转到修改菜品页面&#xff0c;在修改页面回显菜品相关信息并进行修改&#xff0c;最后点击确定按钮完成修改操作。 4.2 菜品修改模块前端页面&#xff08;add.html&#xff09;和服务端的交互过程 1).…

POJ - 2385 Apple Catching (dp)

题意&#xff1a;有两棵树&#xff0c;标号为1和2&#xff0c;在Tmin内&#xff0c;每分钟都会有一个苹果从其中一棵树上落下&#xff0c;问最多移动M次的情况下&#xff08;该人可瞬间移动&#xff09;&#xff0c;最多能吃到多少苹果。假设该人一开始在标号为1的树下。 分析&…

基于Springboot外卖系统17: 新增套餐模块+餐品信息回显+多数据表存储

1.1 新增套餐需求分析 后台系统中可以管理套餐信息&#xff0c;通过新增套餐功能来添加一个新的套餐&#xff0c;在添加套餐时需要选择当前套餐所属的套餐分类和包含的菜品&#xff0c;并且需要上传套餐对应的图片&#xff0c;在移动端会按照套餐分类来展示对应的套餐。 1.2 新…

cocoscreator editbox 只允许数字_用Cocos做一个数字调节框

点击上方蓝色字关注我们~当玩家购买道具的时候&#xff0c;一个个买可能会比较麻烦&#xff0c;用数字调节框的话玩家一次性就可以买好几十个了(钱够的话)。运行效果如下&#xff1a;Cocos Creator版本&#xff1a;2.2.0后台回复"数字调节框"&#xff0c;获取该项目完…

Android Jni 例程

1.Jni的作用 Java是一种比较高级的语言,Java调用c库,调用c++库是必不可少的,所以Jni就应运而生了。 NDK:NDK是Native Development Kit的缩写,是Google提供的一套工具集,可以让你其他语言(C、C++或汇编)开发 Android的 JNI。NDK可以编译多平台的so,开发人员只需要简单…

Xshell 无法连接虚拟机中的ubuntu的问题

转自&#xff1a;http://blog.csdn.net/qq_26941173/article/details/51173320版权声明&#xff1a;本文为博主原创文章&#xff0c;未经博主允许不得转载。 昨天在VMware Player中安装了ubuntu系统&#xff0c;今天想通过xshell连接ubuntu&#xff0c;结果显示 Connecting t…

基于Springboot外卖系统18:套餐分页查询模块+删除套餐+多数据表同步

1. 套餐分页查询模块 1.1 需求分析 系统中的套餐数据很多的时候&#xff0c;如果在一个页面中全部展示出来会显得比较乱&#xff0c;不便于查看&#xff0c;所以一般的系统中都会以分页的方式来展示列表数据。 在进行套餐数据的分页查询时&#xff0c;除了传递分页参数以外&a…

jsp项目开发案例_Laravel 中使用 swoole 项目实战开发案例一 (建立 swoole 和前端通信)life...

1 开发需要环境工欲善其事&#xff0c;必先利其器。在正式开发之前我们检查好需要安装的拓展&#xff0c;不要开发中发现这些问题&#xff0c;打断思路影响我们的开发效率。安装 swoole 拓展包安装 redis 拓展包安装 laravel5.5 版本以上如果你还不会用swoole就out了程序猿的生…

Service rootservice does not have a SELinux domain defined

新增一个SELINUX启动的时候出现问题 新增如下 service rootservice /system/bin/rootserviceuser rootgroup rootdisabledoneshoton property:sys.boot_completed1start rootservice具体补丁请查看文件 链接&#xff1a;https://pan.baidu.com/s/1AlBuXfdn-xFRwDwmsX4svA 提取…

Docker系列第01部分:介绍+虚拟化+什么是Decker+组件

0 应用部署难点 1.在软件开发中&#xff0c;最麻烦的事情之一就是环境配置。在正常情况下&#xff0c;如果要保证程序能运行&#xff0c;我们需要设置好操作系统&#xff0c;以及各种库和组件的安装。2.举例来说&#xff0c;要运行一个Python程序&#xff0c;计算机必须要有 P…