springboot+vue实现文件上传下载_JavaScript

本文实例为大家分享了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");

									}