springboot整合vue实现上传下载⽂件springboot整合vue实现上传下载⽂件，供⼤家参考，具体内容如下
环境
springboot 1.5.x
完整代码下载：
1、上传下载⽂件api⽂件
设置上传路径，如例⼦：
private final static String rootPath =
api接⼝：
//上传不要⽤@Controller,⽤@RestController
@RestController
@RequestMapping("/file")
public class FileController {
private static final Logger logger = Logger(FileController.class);
//在⽂件操作中，不⽤/或者\最好，推荐使⽤File.separator
private final static String fileDir="files";
private final static String rootPath = Property("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 (!ists() && !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);
//或者下⾯的
// Path path = (storagePath);
//Files.write(path,multipartFiles[i].getBytes());
} catch (IOException e) {
<(FullStackTrace(e));
}
}
}
} catch (Exception e) {
(e.getMessage());
}
return ResultUtil.success("上传成功!");
}
/**
* 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 = OutputStream();
// 清空输出流
response.setContentType("application/x-download;charset=GBK");
response.setHeader("Content-Disposition", "attachment;filename="+ new Bytes("utf-8"), "iso-8859-1"));
//读取流
File f = new File(rootPath+fileName);
is = new FileInputStream(f);
if (is == null) {
<("下载附件失败，请检查⽂件“" + fileName + "”是否存在");
("下载附件失败，请检查⽂件“" + fileName + "”是否存在");
}
//复制
} catch (IOException e) {
("下载附件失败,error:"+e.getMessage());
}
/
/⽂件的关闭放在finally中
finally
{
try {
if (is != null) {
is.close();
}
} catch (IOException e) {
<(FullStackTrace(e));
}
try {
if (os != null) {
os.close();
}
} catch (IOException e) {
<(FullStackTrace(e));
}
}
return null;
}
}
上传：
批量上传：
下载：
2.上传⼤⽂件配置
/**
* 设置上传⼤⽂件⼤⼩，配置⽂件属性设置⽆效
*/
@Bean
public MultipartConfigElement multipartConfigElement() {
MultipartConfigFactory config = new MultipartConfigFactory();
config.setMaxFileSize("1100MB");
config.setMaxRequestSize("1100MB");
ateMultipartConfig();
}
3.vue前端主要部分
<template>
<div >
<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>
以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。