文件上传
文件上传，也称为upload，是指将本地图片、视频、音频等文件上传到服务器上，可以供其他用户浏览或下载的过程。文件上传在项目中应用非常广泛，我们经常发微博、发微信朋友圈都用到了文件上传功能。
前端介绍
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上传组件
<el-upload
class="upload-demo"
action="https://jsonplaceholder.typicode.com/posts/"
:on-preview="handlePreview"
:on-remove="handleRemove"
:file-list="fileList"
list-type="picture">
<el-button size="small" type="primary">点击上传</el-button>
<div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
</el-upload>
<script>
export default {
data() {
return {
fileList: [{name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}, {name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}]
};
},
methods: {
handleRemove(file, fileList) {
console.log(file, fileList);
},
handlePreview(file) {
console.log(file);
}
}
}
</script>
服务端介绍
服务端要接收客户端页面上传的文件，通常都会使用Apache的两个组件：
commons-fileupload
commons-io
而Springboot框架在spring-web包中对文件上传进行了封装，大大简化了服务端代码，我们只需要在Controller的方法中声明一个MultipartFile类型的参数即可接收上传的文件，例如：
/**
* 文件上传
* @param file
* @return
*/
@PostMapping("/upload")
public R<String> upload(MultipartFile file){
System.out.println(file);
return R.success(fileName);
}
后端代码的实现
代码实现步骤
1. 获取文件的原始文件名, 通过原始文件名获取文件后缀
2. 通过UUID重新声明文件名, 文件名称重复造成文件覆盖
3. 创建文件存放目录
4. 将上传的临时文件转存到指定位置
/**
* 文件上传
* @param file
* @return
*/
@Value("${reggie.path}")
String imgDir; //文件的存储路径
@PostMapping("/upload") //请求路径
public Result upload(MultipartFile file/*方法形参的名称需要与页面的file域的name属性一致*/) throws IOException {
//1.判断图片目录是否存在,若不存在则创建
File dirFile = new File(imgDir);
if (FileUtil.exist(dirFile)) {
dirFile.mkdir();
}
//2.获取到文件的名称
String filename = file.getOriginalFilename();
//2.1 为了避免同名文件覆盖的问题,给文件名整一个唯一值
filename = IdUtil.fastUUID() + "." + FileUtil.extName(filename);
//3.将文件保存到图片目录
file.transferTo(new File(imgDir + filename));
//4.返回R.success(文件的名称);
return R.success(filename);
}
文件下载
文件下载，也称为download，是指将文件从服务器传输到本地计算机的过程。通过浏览器进行文件下载，通常有两种表现形式：
1. 以附件形式下载，弹出保存对话框，将文件保存到指定磁盘目录
response.setHeader("content-disposition","attachment;filename="+文件名称)
2. 直接在浏览器中打开
而我们在今天所需要实现的菜品展示，表现形式为在浏览器中直接打开。
代码实现
代码实现步骤
1. 定义输入流，通过输入流读取文件内容
2. 通过response对象，获取到输出流
3. 通过response对象设置响应数据格式(image/jpeg)
4. 通过输入流读取文件数据，然后通过上述的输出流写回浏览器
5. 关闭资源
@Value("${reggie.path}")
String imgDir;
@GetMapping("/download")
public void download(String name, HttpServletResponse response) throws IOException {
//1.获取文件的输入流
FileInputStream is = new FileInputStream(imgDir + name);
//扩展一下:若要做文件下载,指定一个文件下载头,(告诉浏览器,用附件的形式进行下载)
//response.setHeader("content-disposition","attachment;filename="+name);
//2.获取输出流
ServletOutputStream os = response.getOutputStream();
//3.流对拷
IoUtil.copy(is, os);
//4.释放资源
is.close();
os.close();
}
参考文章：http://blog.ncmem.com/wordpress/2023/09/12/spring-boot%e6%96%87%e4%bb%b6%e7%9a%84%e4%b8%8a%e4%bc%a0%e5%92%8c%e4%b8%8b%e8%bd%bd%e5%90%8e%e7%ab%af%e7%9a%84%e5%ae%9e%e7%8e%b0/
欢迎入群一起讨论
