springboot整合vue实现上传下载文件

springboot整合vue实现上传下载文件,供大家参考,具体内容如下

环境

springboot 1.5.x

完整代码下载:springboot整合vue实现上传下载

1、上传下载文件api文件

设置上传路径,如例子:

private final static String rootPath =
System.getProperty(“user.home”)+File.separator+fileDir+File.separator;

api接口:

下载url示例:http://localhost:8080/file/download?fileName=新建文本文档.txt

//上传不要用@Controller,用@RestController
@RestController
@RequestMapping("/file")
public class FileController {
 private static final Logger logger = LoggerFactory.getLogger(FileController.class);
 //在文件操作中,不用/或者\最好,推荐使用File.separator
 private final static String fileDir="files";
 private final static String rootPath = System.getProperty("user.home")+File.separator+fileDir+File.separator;
 @RequestMapping("/upload")
 public Object uploadFile(@RequestParam("file") MultipartFile[] multipartFiles, final HttpServletResponse response, final HttpServletRequest request){
  File fileDir = new File(rootPath);
  if (!fileDir.exists() && !fileDir.isDirectory()) {
   fileDir.mkdirs();
  }
  try {
   if (multipartFiles != null && multipartFiles.length > 0) {
    for(int i = 0;i<multipartFiles.length;i++){
     try {
      //以原来的名称命名,覆盖掉旧的
      String storagePath = rootPath+multipartFiles[i].getOriginalFilename();
      logger.info("上传的文件:" + multipartFiles[i].getName() + "," + multipartFiles[i].getContentType() + "," + multipartFiles[i].getOriginalFilename()
        +",保存的路径为:" + storagePath);
       Streams.copy(multipartFiles[i].getInputStream(), new FileOutputStream(storagePath), true);
      //或者下面的
       // Path path = Paths.get(storagePath);
      //Files.write(path,multipartFiles[i].getBytes());
     } catch (IOException e) {
      logger.error(ExceptionUtils.getFullStackTrace(e));
     }
    }
   }

  } catch (Exception e) {
   return ResultUtil.error(e.getMessage());
  }
  return ResultUtil.success("上传成功!");
 }

 /**
  * http://localhost:8080/file/download?fileName=新建文本文档.txt
  * @param fileName
  * @param response
  * @param request
  * @return
  */
 @RequestMapping("/download")
 public Object downloadFile(@RequestParam String fileName, final HttpServletResponse response, final HttpServletRequest request){
  OutputStream os = null;
  InputStream is= null;
  try {
   // 取得输出流
   os = response.getOutputStream();
   // 清空输出流
   response.reset();
   response.setContentType("application/x-download;charset=GBK");
   response.setHeader("Content-Disposition", "attachment;filename="+ new String(fileName.getBytes("utf-8"), "iso-8859-1"));
   //读取流
   File f = new File(rootPath+fileName);
   is = new FileInputStream(f);
   if (is == null) {
    logger.error("下载附件失败,请检查文件“" + fileName + "”是否存在");
    return ResultUtil.error("下载附件失败,请检查文件“" + fileName + "”是否存在");
   }
   //复制
   IOUtils.copy(is, response.getOutputStream());
   response.getOutputStream().flush();
  } catch (IOException e) {
   return ResultUtil.error("下载附件失败,error:"+e.getMessage());
  }
  //文件的关闭放在finally中
  finally
  {
   try {
    if (is != null) {
     is.close();
    }
   } catch (IOException e) {
    logger.error(ExceptionUtils.getFullStackTrace(e));
   }
   try {
    if (os != null) {
     os.close();
    }
   } catch (IOException e) {
    logger.error(ExceptionUtils.getFullStackTrace(e));
   }
  }
  return null;
 }
}

访问:http://localhost:8080

上传:

批量上传:

下载:

2.上传大文件配置

/**
  * 设置上传大文件大小,配置文件属性设置无效
  */
 @Bean
 public MultipartConfigElement multipartConfigElement() {
  MultipartConfigFactory config = new MultipartConfigFactory();
  config.setMaxFileSize("1100MB");
  config.setMaxRequestSize("1100MB");
  return config.createMultipartConfig();
 }

3.vue前端主要部分

<template>
 <div style="top:100px;width:300px">
  <el-form :model="form" label-width="220px">
   <el-form-item label="请输入文件名" required>
    <el-input v-model="form.fileName" auto-complete="off" class="el-col-width" required></el-input>
   </el-form-item>
   <el-form-item>
    <el-button size="small" type="primary" @click="handleDownLoad">下载</el-button>
   </el-form-item>
   <el-form-item>
    <el-upload class="upload-demo" :action="uploadUrl" :before-upload="handleBeforeUpload" :on-error="handleUploadError" :before-remove="beforeRemove" multiple :limit="5" :on-exceed="handleExceed" :file-list="fileList">
     <el-button size="small" type="primary">点击上传</el-button>
     <div slot="tip" class="el-upload__tip">一次文件不超过1Gb</div>
    </el-upload>
   </el-form-item>
  </el-form>

 </div>
</template>

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

时间: 2019-11-30

SpringBoot实现文件上传下载功能小结

最近做的一个项目涉及到文件上传与下载.前端上传采用百度webUploader插件.有关该插件的使用方法还在研究中,日后整理再记录.本文主要介绍SpringBoot后台对文件上传与下载的处理. 单文件上传 // 单文件上传 @RequestMapping(value = "/upload") @ResponseBody public String upload(@RequestParam("file") MultipartFile file) { try { if (

springboot 中文件上传下载实例代码

Spring Boot是由Pivotal团队提供的全新框架,其设计目的是用来简化新Spring应用的初始搭建以及开发过程.该框架使用了特定的方式来进行配置,从而使开发人员不再需要定义样板化的配置.通过这种方式,Spring Boot致力于在蓬勃发展的快速应用开发领域(rapid application development)成为领导者. Spring Boot特点 1. 创建独立的Spring应用程序 2. 嵌入的Tomcat,无需部署WAR文件 3. 简化Maven配置 4. 自动配置Spr

SpringBoot后台实现文件上传下载

SpringBoot后台如何实现文件上传下载? 最近做的一个项目涉及到文件上传与下载.前端上传采用百度webUploader插件.有关该插件的使用方法还在研究中,日后整理再记录.本文主要介绍SpringBoot后台对文件上传与下载的处理. 单文件上传 // 单文件上传 @RequestMapping(value = "/upload") @ResponseBody public String upload(@RequestParam("file") Multipar

详解SpringBoot文件上传下载和多文件上传(图文)

最近在学习SpringBoot,以下是最近学习整理的实现文件上传下载的Java代码: 1.开发环境: IDEA15+ Maven+JDK1.8 2.新建一个maven工程: 3.工程框架 4.pom.xml文件依赖项 <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation

SpringBoot 文件上传和下载的实现源码

本篇文章介绍SpringBoot的上传和下载功能. 一.创建SpringBoot工程,添加依赖 compile("org.springframework.boot:spring-boot-starter-web") compile("org.springframework.boot:spring-boot-starter-thymeleaf") 工程目录为: Application.java 启动类 package hello; import org.springf

springboot实现文件上传和下载功能

spring boot 引入"约定大于配置"的概念,实现自动配置,节约了开发人员的开发成本,并且凭借其微服务架构的方式和较少的配置,一出来就占据大片开发人员的芳心.大部分的配置从开发人员可见变成了相对透明了,要想进一步熟悉还需要关注源码. 1.文件上传(前端页面): <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/lo

SpringBoot实现单文件上传

SpringBoot实现单文件上传功能,供大家参考,具体内容如下 架构为springboot+thymeleaf,采用ajax方式提交 1. 页面testFile.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>测试文件上传</title> <script src="../static/jquery/jquery-2.

SpringBoot实现Excel文件批量上传导入数据库

Spring boot + Spring data jpa + Thymeleaf 批量插入 + POI读取 + 文件上传 pom.xml: <!-- https://mvnrepository.com/artifact/org.apache.poi/poi --> <dependency> <groupId>org.apache.poi</groupId> <artifactId>poi</artifactId> <versi

springboot实现单文件和多文件上传

本文实例为大家分享了springboot实现单文件/多文件上传的具体代码,供大家参考,具体内容如下 package com.heeexy.example.controller; import com.alibaba.fastjson.JSONObject; import com.heeexy.example.util.CommonUtil; import org.springframework.web.bind.annotation.*; import org.springframework.w

详解SpringBoot下文件上传与下载的实现

SpringBoot后台如何实现文件上传下载? 最近做的一个项目涉及到文件上传与下载.前端上传采用百度webUploader插件.有关该插件的使用方法还在研究中,日后整理再记录.本文主要介绍SpringBoot后台对文件上传与下载的处理. 单文件上传 / 单文件上传 @RequestMapping(value = "/upload") @ResponseBody public String upload(@RequestParam("file") Multipart

详解Python下ftp上传文件linux服务器

模块介绍: from ftplib import FTP ftp = FTP() #设置变量 ftp.set_debuglevel(2) #打开调试级别2 显示详细信息 ftp.connect("IP", "port") #连接ftp, IP和端口 ftp.log("user", "password") #连接的用户名.密码 ftp.cwd(pathname) #设置FTP当前操作的路径 ftp.dir() #显示目录下的文件

详解jQuery uploadify文件上传插件的使用方法

uploadify这个插件是基于js里面的jquery库写的.结合了ajax和flash,实现了这个多线程上传的功能. 现在最新版为3.2.1. 在线实例 实例中用到的php文件UploaderDemo.php请在页面下方下载 引入文件 <link rel="stylesheet" type="text/css" href="uploadify.css" /> <script type="text/javascript

详解PHP素材图片上传、下载功能

这里的下载是生成 zip 包进行下载,所以需要 PHP 的ZipArchive ()类,使用本类,linux需开启zlib,windows需取消php_zip.dll前的注释.并且不包括 oss 之类的三方 上传 上传就很简单了,PHP 自带的 move_uploaded_file()函数就可以使用我们简单的文件上传了. 我们只需要把文件的路径存到数据库方便我们下载或展示时使用就 OK了. 这里需要注意上传的路径和文件名尽量不要包括中文. 下载 下载文件我们需要临时生成一个服务器的 zip 包,

JavaWeb实现文件上传与下载实例详解

在Web应用程序开发中,文件上传与下载功能是非常常用的功能,下面通过本文给大家介绍JavaWeb实现文件上传与下载实例详解. 对于文件上传,浏览器在上传的过程中是将文件以流的形式提交到服务器端的,如果直接使用Servlet获取上传文件的输入流然后再解析里面的请求参数是比较麻烦,所以一般选择采用apache的开源工具common-fileupload这个文件上传组件.这个common-fileupload上传组件的jar包可以去apache官网上面下载,common-fileupload是依赖于c

node.js express框架实现文件上传与下载功能实例详解

本文实例讲述了node.js express框架实现文件上传与下载功能.分享给大家供大家参考,具体如下: 背景 昨天吉视传媒的客户对IPS信息发布系统又提了一个新需求,就是发布端发送消息时需要支持附件的上传,而接收端可以对发布端上传的附件进行下载:接收端回复消息时也需要支持上传附件,发布端可以对所有接收端上传的附件进行打包下载. 功能实现 前台部分 前台使用webUploader插件即可,这是百度开发的一款文件上传组件,具体使用查看它的API即可.这个项目之前开发的时候前台使用了angular.

Android关于FTP文件上传和下载功能详解

本文实例为大家分享了Android九宫格图片展示的具体代码,供大家参考,具体内容如下 此篇博客为整理文章,供大家学习. 1.首先下载commons-net  jar包,可以百度下载. FTP的文件上传和下载的工具类: package ryancheng.example.progressbar; import java.io.File; import java.io.FileOutputStream; import java.io.InputStream; import java.io.Outpu

微信小程序学习笔记之文件上传、下载操作图文详解

本文实例讲述了微信小程序学习笔记之文件上传.下载操作.分享给大家供大家参考,具体如下: 前面介绍了微信小程序登录API与获取用户信息操作.这里再来介绍一下文件的上传与下载操作. [文件上传]wx.uploadFile (以上传图片为例) 后台上传接口Upload.php:(tp5) <?php namespace app\home\controller; use think\Controller; class Upload extends First { //上传图片API public fun