文件上传与下载
文件上传也称为upload，是指将本地图片、视频、音频等文件上传到服务器上，可以供其他用户浏览或下载的过程。文件上传在项目中应用非常广泛，我们经常发微博、发微信朋友圈都用到了文件上传功能。
文件上传时，对页面的form表单有如下要求:
method=“post” 采用post方式提交数据
enctype=“multipart/form-data” 采用multipart格式上传文件
type=“file” 使用input的file控件上传
服务端要接收客户端页面上传的文件，通常都会使用Apache的两个组件:
commons-fileupload
commons-io
Spring框架在spring-web包中对文件上传进行了封装，大大简化了服务端代码，我们只需要在Controller的方法中声明一个MultipartFile类型的参数即可接收上传的文件。
1.新建demo包，编写upload前端页面代码。
<!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>
2.在common包下新建CommonController类
//主要进行文件上传和下载处理 @RestController @RequestMapping("/common") @Slf4j public class CommonController { @Value("${reggie.path}") private String basePath; //文件上传方法 @PostMapping("/upload") public R<String> upload(MultipartFile file){ //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.mkdirs(); } try { //将临时文件转存到指定位置 file.transferTo(new File(basePath+fileName)); } catch (IOException e) { e.printStackTrace(); } return R.success(fileName); } }
3.在application.yml编写文件转存路径
reggie:
path: C:\Users\86178\Desktop\瑞吉外卖资料\img\
文件下载也称为download，是指将文件从服务器传输到本地计算机的过程。
通过浏览器进行文件下载，通常有两种表现形式:
以附件形式下载，弹出保存对话框，将文件保存到指定磁盘目录直接在浏览器中打开
通过浏览器进行文件下载，本质上就是服务端将文件以流的形式写回浏览器的过程。
//文件下载 @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(); }
在图片上传完直接下载显示
