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

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

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

环境

springboot 1.5.x

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

1、上传下载文件api文件

设置上传路径，如例子：

privatepTejWJ final static String rootPath =

System.getProperty(“user.home”)+File.separator+fileDir+File.separator;

api接口：

下载url示例:http://localhpTejWJost: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

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);pTejWJ

//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前端主要部分

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);pTejWJ

//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前端主要部分

下载

点击上传

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。