springboot+vue实现文件上传下载


Posted in Vue.js onNovember 17, 2020

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Vue.js 相关文章推荐
Vue项目如何引入bootstrap、elementUI、echarts
Nov 26 Vue.js
解决vue下载后台传过来的乱码流的问题
Dec 05 Vue.js
详解vue中使用transition和animation的实例代码
Dec 12 Vue.js
vue调用微信JSDK 扫一扫,相册等需要注意的事项
Jan 03 Vue.js
vue使用echarts画组织结构图
Feb 06 Vue.js
基于vue的video播放器的实现示例
Feb 19 Vue.js
关于vue中如何监听数组变化
Apr 28 Vue.js
vue+element ui实现锚点定位
Jun 29 Vue.js
Vue h函数的使用详解
Feb 18 Vue.js
vue中的可拖拽宽度div的实现示例
Apr 08 Vue.js
vue组件vue-esign实现电子签名
Apr 21 Vue.js
vue-cli3.x配置全局的scss的时候报错问题及解决
Apr 30 Vue.js
vue 表单输入框不支持focus及blur事件的解决方案
Nov 17 #Vue.js
解决vue elementUI 使用el-select 时 change事件的触发问题
Nov 17 #Vue.js
Vue项目利用axios请求接口下载excel
Nov 17 #Vue.js
vue实现下载文件流完整前后端代码
Nov 17 #Vue.js
vue+iview实现文件上传
Nov 17 #Vue.js
vue中echarts的用法及与elementui-select的协同绑定操作
Nov 17 #Vue.js
vue+iview实现分页及查询功能
Nov 17 #Vue.js
You might like
php 购物车的例子
2009/05/04 PHP
ThinkPHP无限级分类原理实现留言与回复功能实例
2014/10/31 PHP
php随机生成数字字母组合的方法
2015/03/18 PHP
PHP运用foreach神奇的转换数组(实例讲解)
2018/02/01 PHP
PHP分页显示的方法分析【附PHP通用分页类】
2018/05/10 PHP
基于Laravel-admin 后台的自定义页面用法详解
2019/09/30 PHP
Javascript 事件流和事件绑定
2009/07/16 Javascript
javascript 遍历验证所有文本框的值
2009/08/27 Javascript
Javascript匿名函数的一种应用 代码封装
2010/06/27 Javascript
js中如何把字符串转化为对象、数组示例代码
2013/07/17 Javascript
JavaScript实现梯形乘法表的方法
2015/04/25 Javascript
Bootstrap每天必学之面板
2015/11/30 Javascript
vue.js入门(3)——详解组件通信
2016/12/02 Javascript
jquery实现提示语淡入效果
2017/05/05 jQuery
使用 Node.js 开发资讯爬虫流程
2018/01/07 Javascript
JS实现快递单打印功能【推荐】
2018/06/21 Javascript
jQuery轻量级表单模型验证插件
2018/10/15 jQuery
使用Jenkins部署React项目的方法步骤
2019/03/11 Javascript
JS正则表达式封装与使用操作示例
2019/05/15 Javascript
微信小程序动态显示项目倒计时
2019/06/20 Javascript
JavaScript生成随机验证码代码实例
2019/09/28 Javascript
django中静态文件配置static的方法
2018/05/20 Python
详解Python if-elif-else知识点
2018/06/11 Python
Python读取指定日期邮件的实例
2019/02/01 Python
python 并发编程 非阻塞IO模型原理解析
2019/08/20 Python
canvas 阴影和图形变换的示例代码
2018/01/02 HTML / CSS
草莓巧克力:Shari’s Berries
2017/02/07 全球购物
Guess美国官网:美国知名服装品牌
2019/04/08 全球购物
英国经济型酒店品牌:Travelodge
2019/12/17 全球购物
Bata印度官网:源自欧洲舒适鞋履品牌
2020/01/30 全球购物
仪器仪表检测毕业生自荐信
2013/10/31 职场文书
服务行业演讲稿
2014/09/02 职场文书
公司欠款证明
2015/06/24 职场文书
《角的度量》教学反思
2016/02/18 职场文书
MySQL中你可能忽略的COLLATION实例详解
2021/05/12 MySQL
教你用python实现12306余票查询
2021/06/30 Python