所使用的技术：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> <input 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"); }