SpringBoot+Vue3实现文件的上传和下载功能

前言

上传文件和下载文件是我们平时经常用到的功能,接下来就让我们用SpringBootVue3ElementPlus组件实现文件的上传和下载功能吧~

上传前端页面

前端页面我们可以使用ElementPlus框架的el-upload组件完成上传,主要的参数解释如下:

  • action属性:指定请求的url
  • onsuccess属性: 请求成功后的回调函数

我们可以使用axios向后端发起get请求,然后后端返回文件保存的位置

表单项上传框代码如下:

<!-- 附件上传 -->
<el-form-item label="上传图片" ref="uploadElement">
 <el-upload
 class="upload-demo"
 action="/api/file/uploadFile"
 :limit="5"
 :on-success="uploadFileSuccess" 
 >
 <el-button type="primary">添加附件</el-button>
 <template #tip>
 <div class="el-upload__tip">
 pdf, md, word格式均可
 </div>
 </template>
 </el-upload>
</el-form-item>

js单击事件代码如下

// 上传文件返回函数,为了得到后端返回的下载url,保存到数据库中
uploadFileSuccess(response, file, fileList) {
 let filePath = response.data;
 // 上传文件成功后的response参数已经是返回报文中的data部分,不需要使用response.data.data
 alert(response.data);
 // 回调函数中的this指针就是当前页面vue对象
 this.attachForm.downloadUrl = filePath;
}

上传后端代码

Controller代码如下:

@PostMapping("/uploadFile")
public String uploadFile(@RequestParam("file") MultipartFile file, HttpServletRequest request) throws IllegalStateException, IOException{

 // TODO: 文件保存文件夹,后期可以换成配置文件中的内容
 String path = "D:\\uploadfiles";
 String result = "";
 // 调用fileService保存文件
 result = fileService.storeFile(file, path);
 logger.info("文件已保存至" + result);
 return result;
}

fileService代码如下:

/**
* 存储文件到系统
 *
 * @param file 文件
 * @path 保存路径
 * @return 文件名
 * @throws IOException
 * @throws IllegalStateException
 */
@Override
public String storeFile(MultipartFile file, String path) throws IllegalStateException, IOException {
 // 获取原始文件名
 String fileName = file.getOriginalFilename();
 // // 获取文件后缀
 // String suffixName = fileName.contains(".") ? fileName.substring(fileName.lastIndexOf(".")) : null;
 // //文件的保存重新按照时间戳命名
 // String newFileName = System.currentTimeMillis() + suffixName;
 // 最终保存的文件
 File filePath = new File(path + File.separator + fileName);
 // 判断文件夹是否存在
 if (!filePath.getParentFile().exists()) {
 filePath.getParentFile().mkdirs();
 }
 // 保存文件
 file.transferTo(filePath);
 // 如果成功,会返回文件的绝对路径,方便下载
 logger.info("文件已保存至" +filePath.toString());
 return filePath.toString();
}

下载后端代码

因为下载的是文件,所以我们要指定content-type"application/octet-stream;charset=utf-8"。当文件名中含有中文字符时,需要使用URLEncoder.encode(fileName, "UTF-8")转码,然后在前端在转回来,否则会乱码。

@RequestMapping("/downloadFile")
public void downloadFiles(@RequestParam("file") String downUrl, HttpServletRequest request, HttpServletResponse response){
 OutputStream outputStream=null;
 InputStream inputStream=null;
 BufferedInputStream bufferedInputStream=null;
 byte[] bytes=new byte[1024];
 File file = new File(downUrl);
 String fileName = file.getName();
 logger.info("本次下载的文件为" + downUrl);
 // 获取输出流
 try {
 // StandardCharsets.ISO_8859_1 *=UTF-8'
 // response.setHeader("Content-Disposition", "attachment;filename=" + new String(fileName.getBytes(StandardCharsets.UTF_8), StandardCharsets.ISO_8859_1));
 response.setHeader("Content-Disposition", "attachment;filename=" + URLEncoder.encode(fileName, "UTF-8"));
 // 以流的形式返回文件
 response.setContentType("application/octet-stream;charset=utf-8");
 inputStream = new FileInputStream(file);
 bufferedInputStream = new BufferedInputStream(inputStream);
 outputStream = response.getOutputStream();
 int i = bufferedInputStream.read(bytes);
 while (i!=-1){
 outputStream.write(bytes,0,i);
 i = bufferedInputStream.read(bytes);
 }
 } catch (IOException e) {
 e.printStackTrace();
 }finally {
 try {
 if (inputStream!=null){
 inputStream.close();
 }
 if (outputStream!=null){
 outputStream.close();
 }
 if (bufferedInputStream!=null){
 bufferedInputStream.close();
 }
 } catch (IOException e) {
 e.printStackTrace();
 }

 }
  • 下载前端代码 为了让浏览器弹出下载提示框,我们需要在前端做一下处理。
  • 在前端使用decodeURI对文件解码。
downloadAttach(url) {
 let _this = this;
 // 发送get请求
 this.$axios
 .get('/api/file/downloadFile', {
 params: {
 // 向后端传入下载路径
 file: url,
 }
 })
 .then(res => {
 // alert("请求成功");
 console.log(res.data); // 获取服务端提供的数据
 let blob = new Blob([res.data])
 let contentDisposition = res.headers['content-disposition']
 let pattern = new RegExp('filename=([^;]+\\.[^\\.;]+);*')
 let result = pattern.exec(contentDisposition)
 // 使用decodeURI对名字进行解码
 let fileName = decodeURI(result[1])
 let downloadElement = document.createElement('a')
 // 创建下载的链接
 let href = window.URL.createObjectURL(blob)
 downloadElement.style.display = 'none'
 downloadElement.href = href
 // 下载后文件名
 downloadElement.download = fileName
 document.body.appendChild(downloadElement)
 // 点击下载
 downloadElement.click()
 // 下载完成移除元素
 document.body.removeChild(downloadElement)
 // 释放掉blob对象
 window.URL.revokeObjectURL(href)
 })
 .catch(() => {
 alert("请求出错");
 })
 // alert(url);
}

总结

上传下载文件中最让我头疼的是文件名包含中文问题,原先一直不了解不同字符集之间的区别,现在终于清楚点了,原来汉字在电脑里有一种单独地唯一的存储格式,称为内部码。我们使用不同的字符集(如GBK,UTF-8)进行编码和解码时,只是在以不同的方式存储这些内部码,以字节的形式存储下来。

参考文献

作者:遇到坎就得迈过去原文地址:https://blog.csdn.net/qq_43705697/article/details/123960369

%s 个评论

要回复文章请先登录注册