位置: IT常识 - 正文

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

编辑:rootadmin
SpringBoot+Vue实现文件上传下载功能 前言

推荐整理分享SpringBoot+Vue实现文件上传下载功能,希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:,内容如对您有帮助,希望把文章链接给更多的朋友!

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

一、项目基础部分搭建1.1 前端项目搭建1.1.1 新建前端项目

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

vue create file-demo

1.1.2 引入axios

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

npm install 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接口,需要配置这个参数为true secure: false, // 此处配置路径重写 pathRewrite: { '^/file': '/file' } } } }}1.2 后端项目搭建1.2.1 新建后端项目SpringBoot+Vue实现文件上传下载功能

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

1.2.2 编辑配置文件

打开项目,编辑application.properties配置文件,输入以下配置

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

在App.vue中添加如下代码,使用form标签实现文件上传功能

<template> <p>单文件上传</p> <form action="/file/uploadSingleFile" method="post" enctype="multipart/form-data"> 文件: <input type="file" name="file"> <input type="submit"> </form></template>2.1.2 后端代码

在com.example.springbootdemo.controller包下创建UploadFileController.java文件

package com.example.springbootdemo.controller;import lombok.extern.slf4j.Slf4j;import org.springframework.beans.factory.annotation.Value;import org.springframework.web.bind.annotation.PostMapping;import org.springframework.web.bind.annotation.RequestMapping;import org.springframework.web.bind.annotation.RequestParam;import org.springframework.web.bind.annotation.RestController;import org.springframework.web.multipart.MultipartFile;import java.io.File;import java.io.IOException;@Slf4j@RestController@RequestMapping("/file")public class UploadFileController { @Value("${myfile.path}") private String filePath; // 单文件上传功能 @PostMapping("/uploadSingleFile") public void uploadSingleFile(@RequestParam("file") MultipartFile multipartFile) { String fileName = multipartFile.getOriginalFilename(); File file = new File(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> <form action="/file/uploadMultipleFile" method="post" enctype="multipart/form-data"> 文件: <input type="file" name="files" multiple="multiple"> <input type="submit"> </form></template>2.2.2 后端代码

在com.example.springbootdemo.controller包下创建UploadFileController.java文件

package com.example.springbootdemo.controller;import lombok.extern.slf4j.Slf4j;import org.springframework.beans.factory.annotation.Value;import org.springframework.web.bind.annotation.PostMapping;import org.springframework.web.bind.annotation.RequestMapping;import org.springframework.web.bind.annotation.RequestParam;import org.springframework.web.bind.annotation.RestController;import org.springframework.web.multipart.MultipartFile;import java.io.File;import java.io.IOException;@Slf4j@RestController@RequestMapping("/file")public class UploadFileController { @Value("${myfile.path}") private String filePath; // 多文件上传功能实现 @PostMapping("/uploadMultipleFile") public void uploadMultipleFile(@RequestParam("files") MultipartFile multipartFiles[]) { for (MultipartFile multipartFile : multipartFiles) { String fileName = multipartFile.getOriginalFilename(); File file = new File(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';export default{ setup() { let inputData = reactive({ fileName:"" }) // 下载文件函数 async function downloadFile() { let BASE_URL = "/file"; let data = { ...inputData } console.log(inputData); await axios({ url: `${BASE_URL}/downloadFile`, method: "post" , data: data, headers: { 'Content-Type': 'application/json' }, responseType: 'blob', }).then((resp) => { const blob = new Blob([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

package com.example.springbootdemo.controller;import lombok.extern.slf4j.Slf4j;import org.springframework.beans.factory.annotation.Value;import org.springframework.web.bind.annotation.PostMapping;import org.springframework.web.bind.annotation.RequestBody;import org.springframework.web.bind.annotation.RequestMapping;import org.springframework.web.bind.annotation.RestController;import javax.servlet.ServletOutputStream;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import java.io.*;import java.util.Map;@Slf4j@RestController@RequestMapping("/file")public class DownloadFileController { @Value("${myfile.path}") private String filePath; @PostMapping("/downloadFile") public void downloadFile(@RequestBody Map<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(); } } // 下载文件方法: public static void download(HttpServletRequest request, HttpServletResponse response, String filePath, String realName) throws Exception { response.setContentType("text/html;charset=UTF-8"); request.setCharacterEncoding("UTF-8"); BufferedInputStream bis = null; BufferedOutputStream bos = null; long fileLength = (new File(filePath)).length(); response.setContentType("application/octet-stream;charset=GBK"); response.setHeader("Content-disposition", "attachment; filename=" + new String(realName.getBytes("GB2312"), "ISO-8859-1")); response.setHeader("Content-Length", String.valueOf(fileLength)); bis = new BufferedInputStream(new FileInputStream(filePath)); bos = new BufferedOutputStream(response.getOutputStream()); byte[] buff = new byte[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';export default{ setup() { let inputData = reactive({ fileName:"" }) let audioSrc = reactive({ data:"" }); // 在线播放音乐函数 async function playMusic() { let BASE_URL = "/file"; let data = { ...inputData } console.log(inputData); await axios({ 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

package com.example.springbootdemo.controller;import lombok.extern.slf4j.Slf4j;import org.springframework.beans.factory.annotation.Value;import org.springframework.web.bind.annotation.PostMapping;import org.springframework.web.bind.annotation.RequestBody;import org.springframework.web.bind.annotation.RequestMapping;import org.springframework.web.bind.annotation.RestController;import javax.servlet.ServletOutputStream;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import java.io.*;import java.util.Map;@Slf4j@RestController@RequestMapping("/file")public class DownloadFileController { @Value("${myfile.path}") private String filePath; @PostMapping("/downloadFile") public void downloadFile(@RequestBody Map<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(); } } // 下载文件方法: public static void download(HttpServletRequest request, HttpServletResponse response, String filePath, String realName) throws Exception { response.setContentType("text/html;charset=UTF-8"); request.setCharacterEncoding("UTF-8"); BufferedInputStream bis = null; BufferedOutputStream bos = null; long fileLength = (new File(filePath)).length(); response.setContentType("application/octet-stream;charset=GBK"); response.setHeader("Content-disposition", "attachment; filename=" + new String(realName.getBytes("GB2312"), "ISO-8859-1")); response.setHeader("Content-Length", String.valueOf(fileLength)); bis = new BufferedInputStream(new FileInputStream(filePath)); bos = new BufferedOutputStream(response.getOutputStream()); byte[] buff = new byte[2048]; int bytesRead; while(-1 != (bytesRead = bis.read(buff, 0, buff.length))) { bos.write(buff, 0, bytesRead); } bis.close(); bos.close(); }}
本文链接地址:https://www.jiuchutong.com/zhishi/295681.html 转载请保留说明!

上一篇:web前端面试高频考点——Vue的高级特性(动态组件、异步加载、keep-alive、mixin、Vuex、Vue-Router)(web前端面试题最新)

下一篇:前端是什么,是干嘛的(前端是指什么工作)

  • 高德打车怎么投诉呢(高德打车怎么投诉司机接了单又取消订单)

    高德打车怎么投诉呢(高德打车怎么投诉司机接了单又取消订单)

  • 网易云音乐能看到访客吗(网易云音乐能看广告免费听歌30分钟在哪里)

    网易云音乐能看到访客吗(网易云音乐能看广告免费听歌30分钟在哪里)

  • 电信机顶盒怎么下载应用(电信机顶盒怎么下载第三方应用)

    电信机顶盒怎么下载应用(电信机顶盒怎么下载第三方应用)

  • 华为手机显示2g网络怎么回事(华为手机显示2g打不了电话)

    华为手机显示2g网络怎么回事(华为手机显示2g打不了电话)

  • iphone尚未接入互联网是什么意思(iphone尚未接入互联网打不开浏览器)

    iphone尚未接入互联网是什么意思(iphone尚未接入互联网打不开浏览器)

  • 抖音通讯录好友是不是双方(抖音通讯录好友移除怎么恢复回来)

    抖音通讯录好友是不是双方(抖音通讯录好友移除怎么恢复回来)

  • 小米手机上网速度慢的解决方法(小米手机上网速度显示)

    小米手机上网速度慢的解决方法(小米手机上网速度显示)

  • 怎么遮住蓝牙耳机的呼吸灯(蓝牙耳机咋样带防止掉了)

    怎么遮住蓝牙耳机的呼吸灯(蓝牙耳机咋样带防止掉了)

  • 怎么更改微信名(微信公众号怎么更改微信号)

    怎么更改微信名(微信公众号怎么更改微信号)

  • 小米8开启双4g有什么用(小米8双4g什么意思)

    小米8开启双4g有什么用(小米8双4g什么意思)

  • iphone11出厂有膜吗(苹果11买回来有没有膜)

    iphone11出厂有膜吗(苹果11买回来有没有膜)

  • 微信视频显示网络异常是怎么回事(微信视频显示网络异常聊天结束)

    微信视频显示网络异常是怎么回事(微信视频显示网络异常聊天结束)

  • 苹果11首次充电充多久(苹果11首次充电需要关机吗)

    苹果11首次充电充多久(苹果11首次充电需要关机吗)

  • 朋友圈显示全文技巧(朋友圈显示全文带图片)

    朋友圈显示全文技巧(朋友圈显示全文带图片)

  • 华为nova5耳机插孔在哪里(华为nova5耳机插哪里)

    华为nova5耳机插孔在哪里(华为nova5耳机插哪里)

  • 三星支持应用分身吗(三星应用分身是什么)

    三星支持应用分身吗(三星应用分身是什么)

  • 苹果xr能用动态壁纸吗(苹果xr设置动态)

    苹果xr能用动态壁纸吗(苹果xr设置动态)

  • 米聊怎么找回密码(米聊怎么找回密码登录)

    米聊怎么找回密码(米聊怎么找回密码登录)

  • 手机怎样修改路由器的密码(手机怎样修改路由器wifi密码修改)

    手机怎样修改路由器的密码(手机怎样修改路由器wifi密码修改)

  • vivox27怎么强制关机(vivox27怎么强制关机重启)

    vivox27怎么强制关机(vivox27怎么强制关机重启)

  • 哔哩哔哩突然看不到弹幕(哔哩哔哩突然看不到视频)

    哔哩哔哩突然看不到弹幕(哔哩哔哩突然看不到视频)

  • 键盘各键的作用(键盘各键的作用的讲解图)

    键盘各键的作用(键盘各键的作用的讲解图)

  • 知识产权入股需要过户给对方么
  • 个税申报状态失败,如何更正申报
  • 小微自开专票申报时怎么填写
  • 旅游企业纳税
  • 应交税费是没有增值税吗
  • 所得税退税怎么办
  • 员工补偿金是按上十二个月的平均工资
  • 单位劳务派遣的比例
  • 出口收入没有及时申报怎么处罚
  • 多计提的城建税怎么办
  • 没有实收资本是负债吗
  • 企业取得租车发票
  • 门店装修会计怎样处理帐?
  • 作为职工福利费取得的专用发票不能抵扣吗
  • 维修属于劳务还是劳务
  • 委托付款分录
  • 增值税一般纳税人是什么意思
  • 怎么判断企业是一般纳税人还是小规模
  • 旅游门票怎么做分录
  • 腾讯电脑管家开机加速在哪里
  • 腾讯电脑管家网络修复
  • 资产负债表中的货币资金怎么算
  • 违约金合同条款怎么写
  • 预收和应收怎么转换
  • macos big sur卡在
  • PHP选项代码
  • PHP:pg_untrace()的用法_PostgreSQL函数
  • 利得的具体分类
  • 企业可以超范围经营吗
  • Sa-Token v.1.31.0 新增拦截器 SaInterceptor 功能说明,以及旧代码迁移示例
  • 北海道的鱼
  • 公司车辆缴纳车船税需要什么资料
  • phpseclib
  • 固定资产折旧计算方法公式大全
  • smarty怎么用
  • 月收入10万以下免增值税
  • ci框架如何做api
  • 小程序从入门到精通
  • 小规模企业所得税优惠政策最新2022
  • 利润分配的基本原则是( )
  • 保理融资费用账务处理
  • 材料短缺计入成本吗
  • 销售折扣现金流量表
  • 公司不按股权比例分红是否合法
  • 增值税是如何计算的
  • 美金账户余额截图
  • 减免增值税的账务处理是什么
  • 政府工会经费计入什么科目
  • 小规模纳税人能开专票吗2023
  • 其他收益里的政府是什么
  • 债券投资属于什么
  • 福利费入账需要发票吗
  • 员工出差报销补贴政策
  • 住院发票能否用医保卡
  • 采购技术服务费计取
  • 破产重整期间转让股权
  • 企业增资还需要增资账户么
  • 明细账建账的步骤
  • 消费税的科目设置在哪里
  • windows启动失败是怎么回事
  • win10禁用windows键
  • win71
  • centos怎么备份
  • windows server 2012 nfs共享
  • win10系统附件游戏被删除
  • zlib是什么意思
  • jquery取value
  • linux系统启动进程命令
  • python语句分为哪两种
  • python 技巧
  • 如何用js动态创建div
  • 辽宁省视同缴费标准?
  • 江苏省国税务局严三国
  • 电子税务推广工作内容
  • 辽宁省国家税务局网上申报
  • 税务登记注销证明是什么样的
  • 对外支付税务备案表网上核验
  • 国际税收对经济活动的影响
  • 河北耕地占用税最新规定
  • 到税务局领购免税产品
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设