黑马瑞吉外卖之文件上传和下载
黑马瑞吉外卖之文件上传和下载
文件上传的前端页面我们使用到的是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="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 < 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>前端有需要上传图片文件的页面对该组件页面进行了引用。类似这样，我们的前端的几个页面都有需要上传图片。
在这里插入图片描述
下面就是主要看这些方法。
在这里插入图片描述
总之就是这样的组件。
按照图片上传以及前端展示的逻辑，我们需要将图片上传上去，然后将文件进行一个转存。因为这种·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();
}至此文件的上传和下载的代码开发完成。
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2022-08-28，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
