文件上传介绍
文件上传,也称为upload,是指将本地图片、视频、音频等文件上传到服务器上,可以提供其它用户浏览或下载的过程。文件上传在项目中应用非常广泛,我们经常发微博、发微信朋友圈都用到了文件上传功能。
文件上传时,对页面的form表单有如下要求:
method="post" 采用post方式提交数据
enctype="multipart/form-data" 采用multiparty格式上传文件
type="file" 使用input的file控件上传
举例:
<form method="post" action="#" enctype="multipart/form-data">
<input name="myFile" type="file"/>
<input type="submit" value="提交"/>
</form>目前一些前端组件库也提供了相应的上传组件,但是底层原理还是基于form表单的文件上传
例如:vue框架常用的ElementUI中提供的upload上传组件就是这个效果的
服务器要接收客户端页面上传的文件,通常都会使用Apache的两个组件:
commons-fileupload
commons-io
Spring框架在spring-web包中对文件上传进行了封装,大大简化服务端代码,我们只需要在Controller
的方法中声明一个MultipartFile类型的参数即可接收上传的文件,例如:
@PostMapping("/upload")
public R<String> upload(MultipartFile file){
System.out.println(file);
return null;
}需要注意的是文件上传是先经过过滤器处理的,一般过滤器是检验是否登录,所以一般测试时是要先登录的！
文件下载介绍
文件下载，也称为download,是指将文件从服务器传输到本地计算机的过程。
通过浏览器进行文件下载,通常有两种表现形式:
- 以附件形式下载,弹出保存对话框,将文件保存到指定磁盘目录
- 直接在浏览器中打开
通过浏览器进行文件下载,本质上就是服务器将文件以流的形式写回浏览器的过程。
我这里文件上传使用了绝对路径,并且推荐使用绝对路径，理由如下:
项目中涉及上传文件时，如果将文件保存到项目路径，一旦重新部署项目就会出现之前上传的文件找不到的情况；因此我们需要将文件保存到项目以外的绝对路径，或者使用单独的服务保存文件。
文件上传的代码实现
文件上传,页面端可以使用ElementUI提供的上传组件。例子:
文件上传的前端代码
<!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 < 2
if(['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>创建一个Controller控制器,用于操控文件的上传和下载,上面的文件上传的URL是/common/upload，上面的name是file,介绍中已经说明了,底层就是这样,所以Controller的参数一定是file
操作如下:
首先确保过滤器没有拦截文件上传的请求,因为文件上传会先经过过滤器
1、在yml文件中自定义路径
这里暂时定义到D盘
#文件上传路径自定义 reggie: path: D:\
Controller的代码:
/**
* 文件的上传和下载
* @author mrs
* @create 2022-06-01 23:46
*/
@Slf4j
@RestController
@RequestMapping("/common")
public class CommonController {
@Value("${reggie.path}")//读取yml配置文件配置的自定义路径
private String basepath;
/**
* 文件上传
* @param file
* @return
*/
@PostMapping("/upload")
public R<String> upload(MultipartFile file){
//文件上传是先经过过滤器的
//file是一个临时文件,需要转存到指定位置,否则本次请求完成后临时文件会删除
log.info(file.toString());
//文件名使用UUID算法,重新生成文件名,防止文件名重复造成文件覆盖
String fileName = UUID.randomUUID().toString();//随机生成30多位的字符串
//利用原始文件名拿到后缀
String originalFilename = file.getOriginalFilename();//原始文件名
//截取原始文件名的后缀
String suffix = originalFilename.substring(originalFilename.lastIndexOf("."));//截取好后缀了
//最后将30多位字符串和后缀拼接在一起变成文件名
String resString = fileName+suffix;
//创建一个目录对象
File dir = new File(basepath);
//判断当前目录是否存在
if(!dir.exists()){
//目录不存在需要创建
dir.mkdirs();
}
try {
//将临时文件转存到指定位置
file.transferTo(new File(basepath + resString));
} catch (IOException e) {
e.printStackTrace();
}
return R.success(resString);//一般要返回文件名称,因为文件名称要存到数据库中的！
}
}
文件下载的代码实现
文件下载,页面可以使用<img>标签展示下载的图片
就是上面前端代码，文件下载的URL是/common/download?name=${response.data}
<img v-if="imageUrl" :src="imageUrl" class="avatar"></img>
handleAvatarSuccess (response, file, fileList) {
this.imageUrl = `/common/download?name=${response.data}`
},
操作如下:
首先确保过滤器没有拦截文件下载的请求,因为文件下载会先经过过滤器
Controller的代码:
/**
* 文件的上传和下载
* @author mrs
* @create 2022-06-01 23:46
*/
@Slf4j
@RestController
@RequestMapping("/common")
public class CommonController {
@Value("${reggie.path}")//读取yml配置文件配置的自定义路径
private String basepath;
/**
* 文件上传
* @param file
* @return
*/
@PostMapping("/upload")
public R<String> upload(MultipartFile file){
//文件上传是先经过过滤器的
//file是一个临时文件,需要转存到指定位置,否则本次请求完成后临时文件会删除
log.info(file.toString());
//文件名使用UUID算法,重新生成文件名,防止文件名重复造成文件覆盖
String fileName = UUID.randomUUID().toString();//随机生成30多位的字符串
//利用原始文件名拿到后缀
String originalFilename = file.getOriginalFilename();//原始文件名
//截取原始文件名的后缀
String suffix = originalFilename.substring(originalFilename.lastIndexOf("."));//截取好后缀了
//最后将30多位字符串和后缀拼接在一起变成文件名
String resString = fileName+suffix;
//创建一个目录对象
File dir = new File(basepath);
//判断当前目录是否存在
if(!dir.exists()){
//目录不存在需要创建
dir.mkdirs();
}
try {
//将临时文件转存到指定位置
file.transferTo(new File(basepath + resString));
} catch (IOException e) {
e.printStackTrace();
}
return R.success(resString);//一般要返回文件名称,因为文件名称要存到数据库中的！
}
/**
* 文件下载
* @param name
* @param response
*/
@GetMapping("/download")
public void download(String name, HttpServletResponse response){
//输入流,通过输入流读取文件内容
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();
}
}
}
最后必要时还要删除文件思路就是yml文件就是项目中都能获取,
@Value("${reggie.path}")//读取yml配置文件配置的自定义路径
private String basepath;
根据basepath这个路径字符串进行拼接出文件的位置,直接调用delete()方法删除即可,
部分代码如下:
@Value("${reggie.path}")//读取yml配置文件配置的自定义路径
private String basepath;
/**
* 删除单个菜品,还要删除对应的图片
* @param ids
*/
@Override
public void deleteDish(Long ids) {
//清理当前菜品对应口味数据---dish_flavor表的delete操作
LambdaQueryWrapper<DishFlavor> queryWrapper = new LambdaQueryWrapper<>();
queryWrapper.eq(DishFlavor::getDishId,ids);
dishFlavorService.remove(queryWrapper);
Dish dish = getById(ids);
String image = dish.getImage();
//找到对应的路径的文件
File file = new File(basepath+image);
if(file.exists()){
file.delete();
}
//删除dish表对应的数据
removeById(ids);
}
2091
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
