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>

이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.