这篇文章主要为大家详细介绍了springboot+vue实现文件上传下载，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了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方法。
<div class="hello"> </div><!-- Add "scoped" attribute to limit CSS to this component only -->
后端代码：
上传文件代码
@RequestMapping(value = "/up", method = RequestMethod.POST) @ResponseBody public Result 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 stringResult = new Result(); 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.printStackTr<em style="color:transparent">本文来源[email protected]搞@^&代*@码网(</em>ace(); } 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 stringResult = new Result(); stringResult.setMsg("sue"); stringResult.setData("nimabi"); }
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持gaodaima搞代码网。
以上就是springboot+vue实现文件上传下载的详细内容，更多请关注gaodaima搞代码网其它相关文章！
搞代码网（gaodaima.com）提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请说明详细缘由并提供版权或权益证明然后发送到邮箱[email protected]，我们会在看到邮件的第一时间内为您处理，或直接联系QQ：872152909。本网站采用BY-NC-SA协议进行授权
转载请注明原文链接：springboot+vue实现文件上传下载
转载请注明原文链接：springboot+vue实现文件上传下载
