本文实例为大家分享了springboot+vue实现文件上传下载的具体代码,供大家参考,具体内容如下
一、文件上传(基于axios的简单上传)
所使用的技术:axios、springboot、vue;
实现思路:通过h5 :input元素标签进行选择文件,获取所选选择的文件路径,new fromdata对象,设置fromdata的参数,设置axios对应的请求头,最后通过axios发送post请求后端服务。后端服务同过MultipartFile进行文件接收。具体代码如下:
前端代码:
1、创建vue对象
import Vue from 'vue' import App from './App.vue' import router from './router' import store from './store' import http from 'axios' Vue.config.productionTip = false; Vue.prototype.$http=http; window.vm=new Vue({ router, store, render: h => h(App) }).$mount('#app')
2、实现上传组件
在input标签中添加改变事件监听,当发生改变时调用up方法。
<template> <div class="hello"> <input class="file" name="file" type="file" accept="image/png, image/gif, image/jpeg" @change="up" /> </div> </template> <script> export default { name: "HelloWorld", props: { msg: String }, methods: { up(e) { let file = e.target.files[0]; alert(file.name); console.log(file); let param = new FormData(); //创建form对象 param.append("file", file); //通过append向form对象添加数据 console.log(param.get("file")); //FormData私有类对象,访问不到,可以通过get判断值是否传进去 let config = { headers: { "Content-Type": "multipart/form-data" } }; //添加请求头 this.$http .post("http://127.0.0.1:8081/data/up", param, config) .then(response => { console.log(response.data); }).catch( error=>{ alert("失败"); } ); } } }; </script> <!-- Add "scoped" attribute to limit CSS to this component only --> <style scoped lang="less"> </style>
后端代码:
上传文件代码
@RequestMapping(value = "/up", method = RequestMethod.POST) @ResponseBody public Result<String> uploade(@RequestParam("file") MultipartFile file) { try { log.error("开始上传!!!"); String originalFilename = file.getOriginalFilename(); InputStream inputStream = file.getInputStream(); String path="d:/2020test/"; File file1 = new File(path + originalFilename); if(!file1.getParentFile().exists()){ file1.getParentFile().mkdirs(); } file.transferTo(file1); log.info("上传成功!"); } catch (IOException e) { e.printStackTrace(); } Result<String> stringResult = new Result<String>(); stringResult.setMsg("sue"); stringResult.setData("file"); return stringResult; }
二、文件下载
通过response输出流返回文件内容,核心代码设置下载文件的名字(res.setHeader(“Content-Disposition”, “attachment;filename=” + java.net.URLEncoder.encode(realFileName.trim(), “UTF-8”));)
@RequestMapping(value = "/get", method = RequestMethod.GET) public void downloadFile(HttpServletResponse res) { String realFileName="C:/Users/xiongyi/Desktop/12.xls"; File excelFile = new File(realFileName); res.setCharacterEncoding("UTF-8"); res.setHeader("content-type", "application/octet-stream;charset=UTF-8"); res.setContentType("application/octet-stream;charset=UTF-8"); //加上设置大小下载下来的.xlsx文件打开时才不会报“Excel 已完成文件级验证和修复。此工作簿的某些部分可能已被修复或丢弃” // res.addHeader("Content-Length", String.valueOf(excelFile.length())); try { res.setHeader("Content-Disposition", "attachment;filename=" + java.net.URLEncoder.encode(realFileName.trim(), "UTF-8")); } catch (UnsupportedEncodingException e1) { e1.printStackTrace(); } byte[] buff = new byte[1024]; BufferedInputStream bis = null; OutputStream os = null; try { os = res.getOutputStream(); bis = new BufferedInputStream(new FileInputStream(new File(realFileName))); int i = bis.read(buff); while (i != -1) { os.write(buff, 0, buff.length); os.flush(); i = bis.read(buff); } } catch (IOException e) { e.printStackTrace(); } finally { if (bis != null) { try { bis.close(); } catch (IOException e) { } } } Result<String> stringResult = new Result<String>(); stringResult.setMsg("sue"); stringResult.setData("nimabi"); }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件!
如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
白云城资源网 Copyright www.dyhadc.com
暂无“springboot+vue实现文件上传下载”评论...
更新日志
2024年12月27日
2024年12月27日
- 小骆驼-《草原狼2(蓝光CD)》[原抓WAV+CUE]
- 群星《欢迎来到我身边 电影原声专辑》[320K/MP3][105.02MB]
- 群星《欢迎来到我身边 电影原声专辑》[FLAC/分轨][480.9MB]
- 雷婷《梦里蓝天HQⅡ》 2023头版限量编号低速原抓[WAV+CUE][463M]
- 群星《2024好听新歌42》AI调整音效【WAV分轨】
- 王思雨-《思念陪着鸿雁飞》WAV
- 王思雨《喜马拉雅HQ》头版限量编号[WAV+CUE]
- 李健《无时无刻》[WAV+CUE][590M]
- 陈奕迅《酝酿》[WAV分轨][502M]
- 卓依婷《化蝶》2CD[WAV+CUE][1.1G]
- 群星《吉他王(黑胶CD)》[WAV+CUE]
- 齐秦《穿乐(穿越)》[WAV+CUE]
- 发烧珍品《数位CD音响测试-动向效果(九)》【WAV+CUE】
- 邝美云《邝美云精装歌集》[DSF][1.6G]
- 吕方《爱一回伤一回》[WAV+CUE][454M]