一酗昼、創(chuàng)建工具類 Base64.java
package eg.demo.util;
//記得修改包路徑
import org.springframework.stereotype.Service;
import sun.misc.BASE64Decoder;
import java.io.File;
import java.io.FileOutputStream;
import java.util.UUID;
//未導(dǎo)入的包自動(dòng)補(bǔ)全即刻
@Service
public class Base64 {
public String base64(String imageFile) {
String type = imageFile.split(",")[0].split("/")[1].split(";")[0];
imageFile = imageFile.split(",")[1];
BASE64Decoder decoder = new BASE64Decoder();
// Base64解碼
byte[] imageByte = null;
try {
imageByte = decoder.decodeBuffer(imageFile);
for (int i = 0; i < imageByte.length; ++i){
if (imageByte[i] < 0) {// 調(diào)整異常數(shù)據(jù)
imageByte[i] += 256;
}
}
} catch (Exception e) {
e.printStackTrace();
}
return Bytes2File(imageByte,type);
}
public static String Bytes2File(byte[] imageByte , String type)
{
String path = null;
try {
int length = imageByte.length;
//追加文件夾
File file = new File("D:/MusicImage");
if(!file.exists()){
file.mkdirs();
}
path = "D:/MusicImage/"+UUID.randomUUID()+ "." + type;
FileOutputStream fos = new FileOutputStream(path);//isAppend如果為true，為追加寫入，否則為覆蓋寫入
fos.write(imageByte,0,length);
fos.close();
path = path.replaceAll("D:/MusicImage/","/upload/");
}catch (Exception e){
e.printStackTrace();
}
return path;
}
}
二博助、創(chuàng)建配置類 ImageUpLoadConfig.java ，配置虛擬路徑
package org.config;
//記得修改包路徑
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurerAdapter;
@Configuration
public class ImageUpLoadConfig extends WebMvcConfigurerAdapter {
@Override
public void addResourceHandlers(ResourceHandlerRegistry registry) {
//此處為你的絕對(duì)路徑配置虛擬路徑
registry.addResourceHandler("/upload/**").addResourceLocations("file:D:/MusicImage/");
}
}
三痹愚、修改application-dev.yml配置信息富岳，根據(jù)需要改變文件上傳大小限制
此處為了方便，直接使用-1取消上限
tomcat:
max-http-post-size: -1
PS：tomcat與port節(jié)點(diǎn)同級(jí)
四拯腮、前端界面
使用input標(biāo)簽窖式， type = "file"
//圖片校驗(yàn)
//在input file內(nèi)容改變的時(shí)候觸發(fā)事件
$('#upload-file').change(function(){
//獲取input file的files文件數(shù)組;
//$('#filed')獲取的是jQuery對(duì)象，.get(0)轉(zhuǎn)為原生對(duì)象;
//這邊默認(rèn)只能選一個(gè)动壤，但是存放形式仍然是數(shù)組萝喘，所以取第一個(gè)元素使用[0];
var file = $('#upload-file').get(0).files[0];
//創(chuàng)建用來(lái)讀取此文件的對(duì)象
var reader = new FileReader();
//使用該對(duì)象讀取file文件
reader.readAsDataURL(file);
//讀取文件成功后執(zhí)行的方法函數(shù)
reader.onload=function(e){
//讀取成功后返回的一個(gè)參數(shù)e，整個(gè)的一個(gè)進(jìn)度事件
console.log(e);
//選擇所要顯示圖片的img琼懊，要賦值給img的src就是e中target下result里面
//的base64編碼格式的地址
$('#avatar').get(0).src = e.target.result;
// $('#avatar').attr("src","e.target.result");
};
});
五阁簸、后端controller層
使用ajax將64位編碼后的圖片傳到后端controller
@RequestMapping("/demo/upLoadFile")
public String insertImage(String imageFile){
Base64 base64 = new Base64();
String path = base64.base64(imageFile);
//debug標(biāo)記
System.out.println(path);
return path;
}
使用debug模式即可看到返回的path已經(jīng)從繁雜的64位編碼變?yōu)楹?jiǎn)潔的虛擬路徑，圖片也已經(jīng)存儲(chǔ)到Base64.java配置的絕對(duì)路徑下
