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方法。








后端代码:
上传文件代码

 @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.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 stringResult = new Result();
        stringResult.setMsg("sue");
        stringResult.setData("nimabi");

    }

你可能感兴趣的:(杂谈)