ElementUI+Vue画像のアップロードとエコーを実現

本人がテストしたファイルはElementUI+Vueで実現し、アップロードコンポーネントはElementUIのUploadコンポーネントで、違いがあれば、適宜修正してください.
まず、プロファイルアプリケーション.properties

#   
spring.http.multipart.maxFileSize=100M
bspring.http.multipart.maxRequestSize=100Mb
spring.http.multipart.location=D:/projectImage/
spring.mvc.static-path-pattern=/**
spring.resources.static-locations=classpath:/META-INF/resources/,classpath:/resources/,classpath:/static/,classpath:/public/,file:${spring.http.multipart.location}

プロファイルの役割は、画像をアップロードした後にローカルディスクに保存する場所を示すことです.例えば、私が保存した場所はD:/projectImage/
ページ処理

							
	
 jpg/png ， 1M
 


// 
handleAvatarSuccess(res, file) {		//res 
	 if(res!=null){
	 this.$refs.videoFrom.validate(function(valid) {
		if(valid) {
		 =res;
		// 
		}
		}）
	}
}

バックグラウンドコントローラは、アップロードされた画像を受信し、パスを返すために使用されます.

@Value("${spring.http.multipart.location}")
String  rootPath;
@RequestMapping("/upload")
 public String uploadPic(HttpServletRequest request) throws Exception{
	String requestURI = request.getRequestURI();
	Part part = request.getPart("file");
    String urlPath = UUID.randomUUID()+part.getContentType().replace("image/", ".");
    String coverUrl = "/"+requestURI.split("/")[1]+"/"+urlPath;
    IOUtils.copy(part.getInputStream(), new FileOutputStream(rootPath+urlPath));
	return coverUrl;
}

簡単な考え方:私のここの画像のアップロードは他の属性と一緒にformフォームに置かれています.コミットをクリックすると、画像をローカルディスクに保存し、パスをデータベースに保存します.制御層の方法は、重複を防ぐためにランダムコードを画像の名前として生成し、パスをアップロードに成功したフックに戻し、このパスを自分のバインド変数に割り当てることです.それからaxiosでデータベースにコミットすればいいです.
画像エコー:
もし問題があれば、私と交流することを歓迎します~