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 相关文章推荐
Vue3配置axios跨域实现过程解析
Nov 25 Vue.js
vue中watch的用法汇总
Dec 28 Vue.js
vue集成一个支持图片缩放拖拽的富文本编辑器
Jan 29 Vue.js
Vite和Vue CLI的优劣
Jan 30 Vue.js
Vue常用API、高级API的相关总结
Feb 02 Vue.js
vue浏览器返回监听的具体步骤
Feb 03 Vue.js
vue登录页实现使用cookie记住7天密码功能的方法
Feb 18 Vue.js
详解vue3中组件的非兼容变更
Mar 03 Vue.js
vue3.0 数字翻牌组件的使用方法详解
Apr 20 Vue.js
vue动态绑定style样式
Apr 20 Vue.js
vue二维数组循环嵌套方式 循环数组、循环嵌套数组
Apr 24 Vue.js
Vue操作Storage本地化存储
Apr 29 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
预告映像公开!第1章续篇剧场版动画《Princess Principal Crown Handler》4月10日上映!
2020/03/06 日漫
dede3.1分页文字采集过滤规则详说(图文教程)续二
2007/04/03 PHP
ie6 动态缩略图不显示的原因
2009/06/21 PHP
php 日期时间处理函数小结
2009/12/18 PHP
php smarty函数扩展
2010/03/15 PHP
Laravel框架Request、Response及Session操作示例
2019/05/06 PHP
基于PHP实现堆排序原理及实例详解
2020/06/19 PHP
基于JavaScript实现 获取鼠标点击位置坐标的方法
2013/04/12 Javascript
JS Map 和 List 的简单实现代码
2013/07/08 Javascript
web css实现整站样式互相切换
2013/10/29 Javascript
JS实现显示带倒影的图片横排居中放大展示特效实例【测试可用】
2016/08/23 Javascript
jQuery无缝轮播图代码
2016/12/22 Javascript
微信小程序学习(4)-系统配置app.json详解
2017/01/12 Javascript
JavaScript自动点击链接 防止绕过浏览器访问的方法
2017/01/19 Javascript
angular ng-repeat数组中的数组实例
2017/02/18 Javascript
使用vue重构资讯页面的实例代码解析
2019/11/26 Javascript
python解决Fedora解压zip时中文乱码的方法
2016/09/18 Python
python图书管理系统
2020/04/05 Python
python 将列表中的字符串连接成一个长路径的方法
2018/10/23 Python
在Mac上删除自己安装的Python方法
2018/10/29 Python
django小技巧之html模板中调用对象属性或对象的方法
2018/11/30 Python
对dataframe数据之间求补集的实例详解
2019/01/30 Python
Python3 修改默认环境的方法
2019/02/16 Python
Python读写文件基础知识点
2019/06/10 Python
django 外键创建注意事项说明
2020/05/20 Python
Python实现冒泡排序算法的完整实例
2020/11/04 Python
HTML5 Canvas绘制文本及图片的基础教程
2016/03/14 HTML / CSS
英国计算机产品零售商:Novatech(定制个人电脑、笔记本电脑、工作站和服务器)
2018/01/28 全球购物
英国最大的在线床超市:Bed Star
2019/01/24 全球购物
美赞臣新加坡官方旗舰店:Enfagrow新加坡
2019/05/15 全球购物
市三好学生主要事迹
2014/01/28 职场文书
ktv总经理岗位职责
2014/02/17 职场文书
党的群众路线教育实践活动个人承诺书
2014/05/22 职场文书
2015年世界无烟日活动方案
2015/05/04 职场文书
《攀登者》:“海拔8000米以上,你不能指望任何人”
2019/11/25 职场文书
ConditionalOnProperty配置swagger不生效问题及解决
2022/06/14 Java/Android