黑马瑞吉外卖之文件上传和下载

文件上传的前端页面我们使用到的是spring-web对上传代码的一个封装。
我们采用到一个上传的前端页面

这里采用到的前端页面主要部分就是

----
<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="data:imageUrl" class="avatar"></img><i v-else class="el-icon-plus avatar-uploader-icon"></i></el-upload></div></div>
----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>

前端有需要上传图片文件的页面对该组件页面进行了引用。类似这样，我们的前端的几个页面都有需要上传图片。

下面就是主要看这些方法。

总之就是这样的组件。

按照图片上传以及前端展示的逻辑，我们需要将图片上传上去，然后将文件进行一个转存。因为这种·1文件上传以后，会被作为一个临时文件，临时文件的话，当请求完毕以后它就被删掉了。所以啊我们需要转存持久化，然后就是下载，下载的话就是通过流的方式在前端展示读取到浏览器。那么的话就是这样的一个逻辑。

其实我们刚刚看到的前端上传图片的前端代码就给到了上传的图片的请求路径和下载的请求路径。

文件上传路径

文件下载路径

现在开始写后端代码，我们先来看上传图片的代码。

@RestController
@RequestMapping("/common")
public class CommonController {//设置文件临时存储路径@Value("${reggie.path}")private String basepath;//后端请求路径@PostMapping("/upload")public R_<String> upload(MultipartFile file) throws IOException {//        file 是一个临时文件，需要转存到指定位置，否则本次请求完成后，临时文件就会自动被删除。log.info(file.toString());
//        获得原始的文件价名String originalFilename = file.getOriginalFilename();String suffix = originalFilename.substring(originalFilename.lastIndexOf("."));//使用uuid唯一识别码与原来的文件名字组合构建新的名字String fileName = UUID.randomUUID().toString()+suffix;
//        创建一个目录File file1 = new File(basepath);if(file1.exists()){//            如果目录不存在，就创建出来file1.mkdirs();}
//        使用UUID重新生成文件名，防止文件名重复造成覆盖log.info("原始文件名{}",originalFilename);//设置文件的转储路径file.transferTo(new File(basepath+fileName));log.info("传输访问");return R_.success(fileName);}

注意这个 @Value(“${reggie.path}”)，这个是读取配置文件里面的一个路径，写在这里。

然后就是下载

 /*** 文件下载* @param name* @param response*/@GetMapping("/download")public void download(String name, HttpServletResponse response) throws IOException {//        输入流，通过输入流读取文件内容FileInputStream fileInputStream = new FileInputStream(new File(basepath) + name);//        输出流，通过输出流将文件写回到浏览器
//        要向浏览器写回数据，所以通过response响应对象进行写回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();}

这就是后端的文件上传的逻辑。

下面我们来看文件下载的后端逻辑。我们还是按照前面分析到的请求逻辑，下面我们来完成文件下载的逻辑。

 @GetMapping("/download")public void download(String name, HttpServletResponse response) throws IOException {//        输入流，通过输入流读取文件内容FileInputStream fileInputStream = new FileInputStream(new File(basepath) + name);//        输出流，通过输出流将文件写回到浏览器
//        要向浏览器写回数据，所以通过response响应对象进行写回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();}

至此文件的上传和下载的代码开发完成。

黑马瑞吉外卖之文件上传和下载相关推荐

SB_5_瑞吉外卖_4_文件上传下载_菜品新增_菜品分页查询_菜品修改
瑞吉外卖-Day04 课程内容文件上传下载菜品新增菜品分页查询菜品修改 1. 文件上传下载 1.1 上传介绍 1.1.1 概述文件上传,也称为upload,是指将本地图片.视频.音频等文件上 ...
黑马瑞吉外卖项目开发笔记
目录软件开发整体介绍开发流程角色分工软件环境瑞吉外卖项目介绍项目介绍产品原型展示技术选型功能架构角色开发环境搭建数据库环境搭建 Maven环境搭建 1.直接创建maven项目( ...
黑马瑞吉外卖之菜品的启售停售
黑马瑞吉外卖值菜品的启售卖.和停售这一部分功能是课程没有去完成的,但是其实是比较简单的,我们需要去完成菜品的启售和停售. 执行之前的项目,我们要完成的就是这里的这个售卖的状态的更改. 我们先去看一下 ...
黑马瑞吉外卖、菩提阁学习总结
一.项目基础技术选型: 用户层:H5.Vue.js.ElementUI.微信小程序网关层:Nginx 应用层:SpringBoot.SpringMVC.SpringSession.Spring.S ...
黑马瑞吉外卖之移动端验证码登录使用qq邮箱
黑马瑞吉外卖之移动端验证码登录说明用qq邮箱进行验证码发送 hi,我是兰舟千帆,本次更文还是将瑞吉外卖的笔记完善一下.每一篇都写得很认真哦,希望需要的人可以得到帮助,谢谢你们的阅读. 说明 pc端 ...
黑马瑞吉外卖之购物车功能开发（添加购物车和购物车数据展示）
黑马瑞吉外卖之购物车功能前端界面分析后台购物车功能逻辑实现前端界面分析当我们点击选择规格的时候,数据参数item会传入按钮绑定的方法中我们点击到这个按钮的时候,那么就会绑定到这个方法.这个方 ...
黑马lavarel教程---7、文件上传
黑马lavarel教程---7.文件上传一.总结一句话总结: 在laravel里面实现文件的上传是很简单的,压根不用引入第三方的类库,作者把上传作为一个简单的http请求看待的. 1.在lavar ...
黑马瑞吉外卖项目之订单明细的查询，分页，派送功能
黑马瑞吉外卖项目之订单明细的查询,分页,派送功能 /*** 后台管理订单信息分页查询* @param page* @param pageSize* @return*/@GetMapping(" ...
Angular 文件上传与下载
Angular文件上传与下载文件上传方式1 使用NG ZORRO中的组件. 文件下载方式1 直接下载方式2 通过HTTP请求后端数据的方式进行下载文件上传方式1 使用NG ZORRO中的组 ...

黑马瑞吉外卖之文件上传和下载

黑马瑞吉外卖之文件上传和下载

黑马瑞吉外卖之文件上传和下载相关推荐

最新文章

热门文章