spring boot 2.0 그림 을 로 컬 이나 서버 에 업로드 하고 가상 경 로 를 설정 하 는 방법

최근 에는 로 컬 폴 더 나 서버 에 그림 을 업로드 하고 데이터베이스 에 경 로 를 업로드 하 며 업로드 할 때 그림 을 미리 봅 니 다.사용 한 도 구 는 다음 과 같 습 니 다:
  프레임 워 크:spring boot 2.0  
  전단 템 플 릿:thymeleaf
  그림 미리 보기:js
  우선,업로드 및 미리 보기,js 및,미리 보기 그림 의 JS

function Img(obj){
 var imgFile = obj.files[0];
 console.log(imgFile);
 var img = new Image();
 var fr = new FileReader();
 fr.onload = function(){
 $('#img').attr('src',fr.result);
 }
 fr.readAsDataURL(imgFile);
}
<input type="file" name="url" accept="image/gif,image/jpeg,image/jpg,image/png,image/svg" style="opacity:1" onchange="Img(this)"/>

  효 과 는 그림 과 같다.

  배경 에서 그림 가 져 오기 파일 을 로 컬 폴 더 에 저장 합 니 다.파일 저장 과 경 로 를 데이터베이스 에 넣 는 것 이 간단 합 니 다.자 료 를 찾 을 수 있 습 니 다.코드 를 넣 지 않 습 니 다.가상 경로 설정 설명:

  가상 경 로 를 왜 설정 합 니까?가상 경 로 를 설정 하지 않 고 로 컬 폴 더 나 서버 에 있 는 파일 이나 그림 정 보 를 직접 방문 하면 Not allowed to load local resource 가 잘못 되 었 습 니 다.브 라 우 저 는 안전 을 위해 로 컬 파일 을 불 러 올 수 없습니다.

registry.addResourceHandler("/images/**").addResourceLocations("file:/C:/Users/ASUS/Desktop/file/");

먼저"/images/*"가상 경 로 를 설명 합 니 다.
static 정적 파일 에 있 는 file:/C:/Users/ASUS/Desktop/file/   ，C:/Users/ASUS/Desktop/file/는 로 컬 이미지 저장 폴 더 를 말 합 니 다.서버 라면 해당 폴 더 로 바 꾸 면 됩 니 다.여 기 는 코드 설정 정적 파일 이 고.properties 파일 에 직접 설정 할 수 있 습 니 다.
질문 file:/C:/Users/ASUS/Desktop/file/의 쓰기 에 차이 가 있 습 니 다.어떤 것 은 필요 합 니 다file:///C:/Users/ASUS/Desktop/file/.구체 적 인 원인 이 명확 하지 않 습 니 다.기록 하면 데이터 베 이 스 를 저장 하 는 경 로 는/images/+"그림 이름"입 니 다.
마지막 으로 마지막 효과 도 보기:

총결산
위 에서 말 한 것 은 소 편 이 소개 한 spring boot 2.0 사진 을 로 컬 이나 서버 에 올 리 고 가상 경 로 를 설정 하 는 방법 입 니 다.도움 이 되 시 기 를 바 랍 니 다.궁금 한 점 이 있 으 시 면 메 시 지 를 남 겨 주세요.소 편 은 바로 답 해 드 리 겠 습 니 다.여기 서도 저희 사이트 에 대한 여러분 의 지지 에 감 사 드 립 니 다!