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

 更新时间:2021年02月09日 14:04:47   作者:SingleOneMan  
这篇文章主要为大家详细介绍了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>

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

相关文章

  • Spring Boot事务配置操作

    Spring Boot事务配置操作

    这篇文章主要介绍了Spring Boot事务配置操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-09-09
  • 浅谈SpringMVC的拦截器(Interceptor)和Servlet 的过滤器(Filter)的区别与联系 及SpringMVC 的配置文件

    浅谈SpringMVC的拦截器(Interceptor)和Servlet 的过滤器(Filter)的区别与联系 及Spr

    这篇文章主要介绍了浅谈SpringMVC的拦截器(Interceptor)和Servlet 的过滤器(Filter)的区别与联系 及SpringMVC 的配置文件,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-07-07
  • 一文详解Springboot中filter的原理与注册

    一文详解Springboot中filter的原理与注册

    这篇文章主要为大家详细介绍了Springboot中filter的原理与注册的相关知识,文中的示例代码讲解详细,对我们掌握SpringBoot有一定的帮助,需要的可以参考一下
    2023-02-02
  • Spring boot配置文件加解密详解

    Spring boot配置文件加解密详解

    这篇文章主要给大家介绍了关于Spring boot配置文件加解密的相关资料,文中通过示例代码以及图文介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2019-03-03
  • 详解在SpringBoot中@Transactional事物操作和事物无效问题排查

    详解在SpringBoot中@Transactional事物操作和事物无效问题排查

    这篇文章主要介绍了详解在SpringBoot中@Transactional事物操作和事物无效问题排查,本文详细的介绍了SpringBoot中集成使用@Transactional注解操作事物以及事物开启后无效的问题排查,需要的朋友可以参考下
    2021-06-06
  • Java源码解析HashMap的tableSizeFor函数

    Java源码解析HashMap的tableSizeFor函数

    今天小编就为大家分享一篇关于Java源码解析HashMap的tableSizeFor函数,小编觉得内容挺不错的,现在分享给大家,具有很好的参考价值,需要的朋友一起跟随小编来看看吧
    2019-01-01
  • java 线程中start方法与run方法的区别详细介绍

    java 线程中start方法与run方法的区别详细介绍

    这篇文章主要介绍了java 线程中start方法与run方法的区别详细介绍的相关资料,在java线程中调用start方法与run方法的区别在哪里? 这两个问题是两个非常流行的初学者级别的多线程面试问题,这里进行详细说明,需要的朋友可以参考下
    2016-11-11
  • spring java 动态获取consul K/V的方法

    spring java 动态获取consul K/V的方法

    这篇文章主要介绍了spring java 动态获取consul K/V的相关资料,主要包括springConsul配置kv路径以及自动注入consulKV到服务中,本文给大家介绍的非常详细,需要的朋友可以参考下
    2023-10-10
  • SSM使用mybatis分页插件pagehepler实现分页示例

    SSM使用mybatis分页插件pagehepler实现分页示例

    本篇文章主要介绍了SSM使用mybatis分页插件pagehepler实现分页示例,使用分页插件的原因,简化了sql代码的写法,实现较好的物理分页,非常具有实用价值,需要的朋友可以参考下
    2018-03-03
  • java ArrayList.remove()的三种错误用法以及六种正确用法详解

    java ArrayList.remove()的三种错误用法以及六种正确用法详解

    这篇文章主要介绍了java ArrayList.remove()的三种错误用法以及六种正确用法详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-01-01

最新评论