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使用vue-count-to组件的实现
Dec 25 Vue.js
Vue实现简易购物车页面
Dec 30 Vue.js
基于Vue2实现移动端图片上传、压缩、拖拽排序、拖拽删除功能
Jan 05 Vue.js
vue使用过滤器格式化日期
Jan 20 Vue.js
Vue看了就会的8个小技巧
Jan 21 Vue.js
Vue包大小优化的实现(从1.72M到94K)
Feb 18 Vue.js
Vue实现导入Excel功能步骤详解
Jul 03 Vue.js
vue实现滑动解锁功能
Mar 03 Vue.js
一起来看看Vue的核心原理剖析
Mar 24 Vue.js
vue实现拖拽交换位置
Apr 07 Vue.js
vue2的 router在使用过程中遇到的一些问题
Apr 13 Vue.js
vue @ ~ 相对路径 路径别名设置方式
Jun 05 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如何调用webservice应用介绍
2012/11/24 PHP
ThinkPHP关于session的操作方法汇总
2014/07/18 PHP
php和vue配合使用技巧和方法
2019/05/09 PHP
JQuery toggle使用分析
2009/11/16 Javascript
JavaScript 学习笔记(十三)Dom创建表格
2010/01/21 Javascript
JavaScript AJAX之惰性载入函数
2014/08/27 Javascript
用javascript关闭本窗口不弹出询问框的方法
2014/09/12 Javascript
jquery图片切换插件
2015/03/16 Javascript
JS动态修改图片的URL(src)的方法
2015/04/01 Javascript
javascript基础语法学习笔记
2016/01/04 Javascript
javascript每日必学之继承
2016/02/23 Javascript
Javascript自执行匿名函数(function() { })()的原理浅析
2016/05/15 Javascript
模拟javascript中的sort排序(简单实例)
2016/08/17 Javascript
AngularJS框架中的双向数据绑定机制详解【减少需要重复的开发代码量】
2017/01/19 Javascript
swiper动态改变滑动内容的实现方法
2018/01/17 Javascript
Bootstrap table中toolbar新增条件查询及refresh参数使用方法
2018/05/18 Javascript
Vue2.0 实现歌手列表滚动及右侧快速入口功能
2018/08/08 Javascript
快速解决select2在bootstrap模态框中下拉框隐藏的问题
2018/08/10 Javascript
vue 对象添加或删除成员时无法实时更新的解决方法
2019/05/01 Javascript
Python urlopen 使用小示例
2008/09/06 Python
简单的Python抓taobao图片爬虫
2014/10/26 Python
python使用smtplib模块通过gmail实现邮件发送的方法
2015/05/08 Python
解决python文件字符串转列表时遇到空行的问题
2017/07/09 Python
MAC中PyCharm设置python3解释器
2017/12/15 Python
使用Selenium破解新浪微博的四宫格验证码
2018/10/19 Python
python使用ddt过程中遇到的问题及解决方案【推荐】
2018/10/29 Python
Python 中Django验证码功能的实现代码
2019/06/20 Python
python 自定义装饰器实例详解
2019/07/20 Python
Python实现图片裁剪的两种方式(Pillow和OpenCV)
2019/10/30 Python
Nginx+Uwsgi+Django 项目部署到服务器的思路详解
2020/05/08 Python
一份比较全的PHP面试题
2016/07/29 面试题
SQL Server提供的3种恢复模型都是什么? 有什么区别?
2012/05/13 面试题
肯尼迪就职演说稿
2013/12/31 职场文书
满月酒答谢词
2014/01/14 职场文书
销售人员求职的自我评价分享
2014/03/15 职场文书
特别篇动画《总之就是非常可爱 ~制服~》PV公开,2022年夏季播出
2022/04/04 日漫