SpringBoot+Vue实现文件上传下载功能

前言

本文主要实现了以下功能：
1、 单文件上传以及多文件上传功能
2、 输入文件名下载文件功能
3、 输入音频文件名在线播放音频功能

一、项目基础部分搭建

1.1 前端项目搭建

1.1.1 新建前端项目

打开命令行输入以下命令，使用Vue CLI创建前端项目，Vue CLI安装教程

vue create file-demo

1.1.2 引入axios

输入以下命令在项目中引入

axios

npminstall axios --save

1.1.3 解决跨域问题

打开vue.config.js添加以下配置，修改启动端口，以及配置代理解决跨域问题

const{ defineConfig }=require('@vue/cli-service')
module.exports =defineConfig({transpileDependencies:true})

module.exports ={devServer:{// 修改前端项目启动端口号port:8081,proxy:{'^/file':{// 此处配置对应的后端端口target:"http://localhost:8080",// 如果是https接口，需要配置这个参数为truesecure:false,// 此处配置路径重写pathRewrite:{'^/file':'/file'}}}}}

1.2 后端项目搭建

1.2.1 新建后端项目

打开IDEA，按照以下步骤创建一个新的SpringBoot项目

1.2.2 编辑配置文件

打开项目，编辑

application.properties

配置文件，输入以下配置

#可以选择性的修改或选择以下配置#配置服务端口server.port=8080#是否开启文件上传支持，默认是truespring.servlet.multipart.enabled=true
#文件写入磁盘的阈值，默认是0
spring.servlet.multipart.file-size-threshold=0#单个文件的最大值，默认是50MB
spring.servlet.multipart.max-file-size=50MB
#多个文件上传时的总大小 值，默认是100MB
spring.servlet.multipart.max-request-size=100MB
#是否延迟解析，默认是false
spring.servlet.multipart.resolve-lazily=false
#自定义文件访问路径myfile.path=E:\\test\\dir

二、文件上传功能

2.1 单文件上传功能实现

2.1.1 前端代码

在

App.vue

中添加如下代码，使用

form

标签实现文件上传功能

<template><p>单文件上传</p><formaction="/file/uploadSingleFile"method="post"enctype="multipart/form-data">
    文件：
    <inputtype="file"name="file"><inputtype="submit"></form></template>

2.1.2 后端代码

在

com.example.springbootdemo.controller

包下创建

UploadFileController.java

文件

packagecom.example.springbootdemo.controller;importlombok.extern.slf4j.Slf4j;importorg.springframework.beans.factory.annotation.Value;importorg.springframework.web.bind.annotation.PostMapping;importorg.springframework.web.bind.annotation.RequestMapping;importorg.springframework.web.bind.annotation.RequestParam;importorg.springframework.web.bind.annotation.RestController;importorg.springframework.web.multipart.MultipartFile;importjava.io.File;importjava.io.IOException;@Slf4j@RestController@RequestMapping("/file")publicclassUploadFileController{@Value("${myfile.path}")privateString filePath;// 单文件上传功能@PostMapping("/uploadSingleFile")publicvoiduploadSingleFile(@RequestParam("file")MultipartFile multipartFile){String fileName = multipartFile.getOriginalFilename();File file =newFile(filePath +'\\'+ fileName);if(!file.getParentFile().exists()){
            file.getParentFile().mkdirs();
            log.info("父级文件目录不存在，已创建目录");}try{
            multipartFile.transferTo(file);}catch(IOException e){
            log.error("{}",e);
            log.error("程序错误，请重新上传");
            e.printStackTrace();}finally{
            log.info("文件上传成功，文件全路径名称为：{}",file.getPath());}}}

2.2 多文件上传功能实现

2.2.1 前端代码

在

App.vue

中添加如下代码，使用

form

标签实现文件上传功能

<template><p>多文件上传</p><formaction="/file/uploadMultipleFile"method="post"enctype="multipart/form-data">
    文件：
    <inputtype="file"name="files"multiple="multiple"><inputtype="submit"></form></template>

2.2.2 后端代码

在

com.example.springbootdemo.controller

包下创建

UploadFileController.java

文件

packagecom.example.springbootdemo.controller;importlombok.extern.slf4j.Slf4j;importorg.springframework.beans.factory.annotation.Value;importorg.springframework.web.bind.annotation.PostMapping;importorg.springframework.web.bind.annotation.RequestMapping;importorg.springframework.web.bind.annotation.RequestParam;importorg.springframework.web.bind.annotation.RestController;importorg.springframework.web.multipart.MultipartFile;importjava.io.File;importjava.io.IOException;@Slf4j@RestController@RequestMapping("/file")publicclassUploadFileController{@Value("${myfile.path}")privateString filePath;// 多文件上传功能实现@PostMapping("/uploadMultipleFile")publicvoiduploadMultipleFile(@RequestParam("files")MultipartFile multipartFiles[]){for(MultipartFile multipartFile : multipartFiles){String fileName = multipartFile.getOriginalFilename();File file =newFile(filePath +'\\'+ fileName);if(!file.getParentFile().exists()){
                file.getParentFile().mkdirs();
                log.info("父级文件目录不存在，已创建目录");}try{
                multipartFile.transferTo(file);}catch(IOException e){
                log.error("{}",e);
                log.error("程序错误，请重新上传");
                e.printStackTrace();}finally{
                log.info("文件上传成功，文件全路径名称为：{}",file.getPath());}}}}

三、文件下载功能

3.1 普通文件下载功能实现

3.1.1 前端代码

在

App.vue

中添加如下代码，使用

form

标签实现文件上传功能

<template><p>文件下载{{inputData.fileName}}</p><input type="text" placeholder="请输入全文件名" v-model="inputData.fileName"><button @click="downloadFile">下载</button></template><script>import axios from'axios';import{ reactive }from'vue';exportdefault{setup(){let inputData =reactive({fileName:""})// 下载文件函数asyncfunctiondownloadFile(){letBASE_URL="/file";let data ={...inputData
      }
      console.log(inputData);awaitaxios({url:`${BASE_URL}/downloadFile`,method:"post",data: data,headers:{'Content-Type':'application/json'},responseType:'blob',}).then((resp)=>{const blob =newBlob([resp.data]);var downloadElement = document.createElement("a");var href = window.URL.createObjectURL(blob);
        downloadElement.href = href;
        downloadElement.download =decodeURIComponent(inputData.fileName);
        document.body.appendChild(downloadElement);
        downloadElement.click();
        document.body.removeChild(downloadElement);
        window.URL.revokeObjectURL(href);});}return{
      inputData,
      downloadFile
    }}}</script>

3.1.2 后端代码

在

com.example.springbootdemo.controller

包下建立

DownloadFileController

packagecom.example.springbootdemo.controller;importlombok.extern.slf4j.Slf4j;importorg.springframework.beans.factory.annotation.Value;importorg.springframework.web.bind.annotation.PostMapping;importorg.springframework.web.bind.annotation.RequestBody;importorg.springframework.web.bind.annotation.RequestMapping;importorg.springframework.web.bind.annotation.RestController;importjavax.servlet.ServletOutputStream;importjavax.servlet.http.HttpServletRequest;importjavax.servlet.http.HttpServletResponse;importjava.io.*;importjava.util.Map;@Slf4j@RestController@RequestMapping("/file")publicclassDownloadFileController{@Value("${myfile.path}")privateString filePath;@PostMapping("/downloadFile")publicvoiddownloadFile(@RequestBodyMap<String,String> params,HttpServletRequest request,HttpServletResponse response){
        log.info("文件名为：{}",params.get("fileName"));if(!params.containsKey("fileName")|| params.get("fileName")==null||"".equals(params.get("fileName"))){
            log.info("文件名不存在");return;}if(filePath ==null||"".equals(filePath)){
            log.info("文件路径不存在");return;}String fileName = params.get("fileName");String fullPath = filePath +"\\"+ fileName;try{download(request,response, fullPath, fileName);}catch(Exception e){
            log.error("{}",e);
            log.error("文件下载失败");
            e.printStackTrace();}}// 下载文件方法：publicstaticvoiddownload(HttpServletRequest request,HttpServletResponse response,String filePath,String realName)throwsException{
        response.setContentType("text/html;charset=UTF-8");
        request.setCharacterEncoding("UTF-8");BufferedInputStream bis =null;BufferedOutputStream bos =null;long fileLength =(newFile(filePath)).length();
        response.setContentType("application/octet-stream;charset=GBK");
        response.setHeader("Content-disposition","attachment; filename="+newString(realName.getBytes("GB2312"),"ISO-8859-1"));
        response.setHeader("Content-Length",String.valueOf(fileLength));
        bis =newBufferedInputStream(newFileInputStream(filePath));
        bos =newBufferedOutputStream(response.getOutputStream());byte[] buff =newbyte[2048];int bytesRead;while(-1!=(bytesRead = bis.read(buff,0, buff.length))){
            bos.write(buff,0, bytesRead);}

        bis.close();
        bos.close();}}

3.2 音频文件在线播放功能实现

3.2.1 前端代码

在

App.vue

中添加如下代码，使用

form

标签实现文件上传功能

<template><p>文件下载{{inputData.fileName}}</p><input type="text" placeholder="请输入全文件名" v-model="inputData.fileName"><button @click="downloadFile">下载</button><p>音乐在线播放{{}}</p><input type="text" placeholder="请输入音乐文件名" v-model="inputData.fileName"><button @click="playMusic">播放音乐</button><br><audio controls currentTime autoplay :src='audioSrc.data'></audio></template><script>import axios from'axios';import{ reactive }from'vue';exportdefault{setup(){let inputData =reactive({fileName:""})let audioSrc =reactive({data:""});// 在线播放音乐函数asyncfunctionplayMusic(){letBASE_URL="/file";let data ={...inputData
      }
      console.log(inputData);awaitaxios({url:`${BASE_URL}/downloadFile`,method:"post",data: data,headers:{'Content-Type':'application/json'},responseType:'blob',}).then((Blobdata)=>{
        audioSrc.data = window.URL.createObjectURL(Blobdata.data);});}return{
      inputData,
      audioSrc,
      playMusic
    }}}</script>

3.2.2 后端代码

在

com.example.springbootdemo.controller

包下建立

DownloadFileController

packagecom.example.springbootdemo.controller;importlombok.extern.slf4j.Slf4j;importorg.springframework.beans.factory.annotation.Value;importorg.springframework.web.bind.annotation.PostMapping;importorg.springframework.web.bind.annotation.RequestBody;importorg.springframework.web.bind.annotation.RequestMapping;importorg.springframework.web.bind.annotation.RestController;importjavax.servlet.ServletOutputStream;importjavax.servlet.http.HttpServletRequest;importjavax.servlet.http.HttpServletResponse;importjava.io.*;importjava.util.Map;@Slf4j@RestController@RequestMapping("/file")publicclassDownloadFileController{@Value("${myfile.path}")privateString filePath;@PostMapping("/downloadFile")publicvoiddownloadFile(@RequestBodyMap<String,String> params,HttpServletRequest request,HttpServletResponse response){
        log.info("文件名为：{}",params.get("fileName"));if(!params.containsKey("fileName")|| params.get("fileName")==null||"".equals(params.get("fileName"))){
            log.info("文件名不存在");return;}if(filePath ==null||"".equals(filePath)){
            log.info("文件路径不存在");return;}String fileName = params.get("fileName");String fullPath = filePath +"\\"+ fileName;try{download(request,response, fullPath, fileName);}catch(Exception e){
            log.error("{}",e);
            log.error("文件下载失败");
            e.printStackTrace();}}// 下载文件方法：publicstaticvoiddownload(HttpServletRequest request,HttpServletResponse response,String filePath,String realName)throwsException{
        response.setContentType("text/html;charset=UTF-8");
        request.setCharacterEncoding("UTF-8");BufferedInputStream bis =null;BufferedOutputStream bos =null;long fileLength =(newFile(filePath)).length();
        response.setContentType("application/octet-stream;charset=GBK");
        response.setHeader("Content-disposition","attachment; filename="+newString(realName.getBytes("GB2312"),"ISO-8859-1"));
        response.setHeader("Content-Length",String.valueOf(fileLength));
        bis =newBufferedInputStream(newFileInputStream(filePath));
        bos =newBufferedOutputStream(response.getOutputStream());byte[] buff =newbyte[2048];int bytesRead;while(-1!=(bytesRead = bis.read(buff,0, buff.length))){
            bos.write(buff,0, bytesRead);}

        bis.close();
        bos.close();}}