spring boot 파일 서버 구축 여러 개의 그림 과 다운로드 문 제 를 동시에 업로드 합 니 다.

평소 업무 장면 에 서 는 파일 업로드 서버 를 구축 해 공공 서비스 로 활용 하 는 것 을 피 할 수 없다.일반적인 상황 에서 하나의 파일 만 업로드 하고 실제 업무 장면 에서 하나의 파일 이 업로드 되 는 것 을 발견 하면 일부 업무 수 요 를 만족 시 키 지 못 하기 때문에 우 리 는 여러 파일 을 동시에 업로드 하 는 인 터 페 이 스 를 작성 하고 다운로드 가능 한 파일 주 소 를 되 돌려 주 는 방법 을 해결 해 야 한다.
쓸데없는 말 은 그만 하고 처음부터 Spring boot 프로젝트 를 만 들 지 않 습 니 다.모 르 면 홈 페이지 로 가서 인 스 턴 스 를 확인 하 십시오.
다음은 우리 가 사진 을 올 리 는 것 을 예 로 들 면 예 시 는 상대 적 으로 간단 하 니 참고 하 시기 바 랍 니 다.
1 백 엔 드 업로드 이미지 인터페이스 논리

UploadController.java
package com.zz.controllers.fileUpload;
import com.zz.Application;
import com.zz.model.Response;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.boot.web.server.LocalServerPort;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.multipart.MultipartFile;
import java.io.*;
import java.net.Inet4Address;
import java.net.InetAddress;
import java.nio.file.Path;
import java.util.ArrayList;
import java.util.UUID;
import static com.zz.config.ConfigConstants.getFileDir;
@RestController
@Configuration
public class UploadController {
 private static final Logger log = LoggerFactory.getLogger(Application.class);
 @Value("${server.port}")
 private String port;
 //    IP  
 public String getIp() {
  InetAddress localhost = null;
  try {
   localhost = Inet4Address.getLocalHost();
  } catch (Exception e) {
   log.error(e.getMessage());
   e.printStackTrace();
  }
  return localhost.getHostAddress();
 }
 @PostMapping(value = "/upload", consumes = {"multipart/form-data"})
 public Response upload(@RequestParam("file") MultipartFile[] files, Response response) {
  log.info("      ");
  StringBuilder builder = new StringBuilder();
  // file address
  String fileAddress ="http://"+ getIp()+ ":" + port + File.separator;
  ArrayList<String> imgUrls = new ArrayList<String>();
  try {
   for (int i = 0; i < files.length; i++) {
    // old file name
    String fileName = files[i].getOriginalFilename();
    // new filename
    String generateFileName = UUID.randomUUID().toString().replaceAll("-", "") + fileName.substring(fileName.lastIndexOf("."));
    // store filename
    String distFileAddress = fileAddress + generateFileName;
    builder.append(distFileAddress+",");
    imgUrls.add(distFileAddress);
    // generate file to disk
    files[i].transferTo(new File(getFileDir() + generateFileName));
   }
  } catch (Exception e) {
   e.printStackTrace();
  }
  response.setMsg("success");
  log.info(builder.toString());
  response.setData(imgUrls);
  return response;
 }
}

하나의 파일 의 수신 에 비해 여러 개의 file 대상 을 직접 받 아들 인 다음 에 모든 주 소 를 옮 겨 다 니 며 생 성 합 니 다.
그 중:
getFileDir 그림 을 저장 할 주 소 를 설정 합 니 다.항목 밖의 다른 곳 을 선택 하 겠 습 니 다.

com.zz.config.ConfigConstants.getFileDir
package com.zz.config;
public class ConfigConstants {
 public static String fileDir;
 public static String getFileDir() {
  fileDir = "/Users/wz/projects/blog/uploadFile/";
  return fileDir;
 }
}

지정 한 폴 더 에 파일 을 생 성 한 후에 현재 server 에서 프로젝트 밖의 정적 파일 이미지 자원 을 어떻게 설정 하고 다운로드 할 수 있 습 니까?
이것 은 spring boot 설정 파일 application.yml 을 이용 해 야 합 니 다.현재 WebMvcConfigure 와 같은 다른 방법 도 있 습 니 다.

application.yml
pring:
 jpa:
 show-sql: true
 hibernate:
  ddl-auto: update
 servlet:
 multipart:
  max-file-size: 10MB
  max-request-size: 10MB
 profiles:
 active: dev
 #       
 mvc:
 static-path-pattern: /**
 resources:
 static-locations: file:/Users/wz/projects/blog/uploadFile/,classpath:/static/,classpath:/resources/,classpath:/file/,classpath:/templates/
server:
 use-forward-headers: true
 tomcat:
 remote-ip-header: X-Real-IP
 protocol-header: X-Forwarded-Proto
#   
my:
 tokenURL: "55555"
 authURL: "88888"

이렇게 한 후에 우 리 는 생 성 된 결과 에서http://192.168.31.77:8080/a7ef32e3922b46aea256a93dd53de288.png이러한 주 소 는 파일 을 실질 적 으로 file:/Users/wz/procject/blog/uploadFile/로 가리 킬 수 있 습 니 다.이렇게 하면 대체적으로 간단 한 파일 서버 의 설정 입 니 다.물론 이에 미 치지 못 하고 압축 기능 도 있 습 니 다.나중에 다시 이야기 하 겠 습 니 다.
백 엔 드 논리 가 뚜렷 합 니 다.
그러면 전단 은 어떻게 백 엔 드 에 여러 개의 file 대상 을 동시에 보 냅 니까?
2 전단 여러 파일 업로드 방법
html

<input type="file" multiple class="el-upload" accept="image/*" name="file">

js

//upload
var uploadBtn = document.querySelector('.el-upload');
uploadBtn.onchange = function (e) {
 let files = this.files;
 console.log(this.files);
 const xhr = new XMLHttpRequest();
 xhr.open("post", "/upload", true);
 // xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
 xhr.onreadystatechange = function () {
  if (this.readyState === XMLHttpRequest.DONE && this.status === 200) {
   console.log(JSON.parse(this.responseText));
   const {data} = JSON.parse(this.responseText);
   if(!data) return;
   const imageList = data.slice(0);
   let imageStr = '';
   imageList.forEach(img=>{
    imageStr += `<img src="${img}" />`;
   });
   document.getElementById("result").innerHTML = imageStr;
  }
 };
 const formData = new FormData();
 //   file     
 if(files && files.length){
  for (let i=0;i<files.length;i++) {
   formData.append("file", files[i])
  }
 }
 console.log(formData);
 xhr.send(formData);
};

전단 은 FormData 매개 변 수 를 통 해 POST 요청 을 보 냅 니 다.
이전의 단일 formData.append()와 구별 합 니 다.같은 이름 의 파일 바 이 너 리 파일 흐름 을 동시에 append 할 수 있 습 니 다.
![image-20191123234150228](assets/image-
 
.png)

그림 결과 가 정상적으로 나타 나 면 서버 에 배 치 될 때 이것 은 웹 서버 로 사용 할 수 있 습 니 다.