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");

    }