前端上傳圖片回顯並用base64編碼，后端做解碼儲存，存儲圖片路徑在.properties文件中配置（以上傳身份證照片為例）

前端頁面：
<form id="kycForm" enctype="multipart/form-data">

<input type="hidden" id="hid" name="idPhotoUrl" value=""/>
<input type="hidden" id="hid2" name="idPhotoUrl2" value=""/>

<div class="first-key">

    <div> <img src="背景圖片路徑" alt="" style="width: 100%;height: 100%;margin-top:.3rem;"></div>
    <img id="img1" class="img" src="上傳按鈕樣式圖片路徑" alt=" " >
    <input type="file" class="file"  placeholder="ICCID" id="fil" name="photo1"  accept="img/*" capture="camera">
    <span style="margin-top: .5rem;z-index: 99">上傳身份證正面照</span>

</div>
<div class="first-key">
    <div> <img src="背景圖片路徑" alt="" style="margin-top: .3rem;width: 100%;height: 100%;"></div>
    <img id="img2" class="img" src="上傳按鈕樣式圖片路徑" alt="">
    <input type="file" class="file"  placeholder="ICCID" id="fil2" name="photo2" accept="img/*" capture="camera">
    <span style="margin-top: .5rem">手持身份證反面照</span>
</div>

<div class="btn-center">
    <button type="button" id="btn-go" class="btn btn-primary"  >提交審核</button>
</div>
</form>

<script>
    $(".first-key").on("change", "input[name=photo1]", function() {
        $(this).prev().css("opacity","1")
        var filePath = $(this).val();//讀取圖片路徑
        //將圖片的URL賦值與hidden標簽內
        var fr = new FileReader();//創建new FileReader()對象
        var imgObj = this.files[0];//獲取圖片
        fr.readAsDataURL(imgObj);//將圖片讀取為DataURL
        var obj = $(this).prev()[0];//
        var arr = filePath.split('\\');
        var fileName = arr[arr.length - 1];
        $("#img1").removeClass("img");
        $("#img1").addClass("img2");
        $(this).parent().next().show();
        fr.onload = function() {
            obj.src = this.result;
            //將base64編碼后的圖片賦值到hidden標簽內
            $("#hid").val(obj.src);
        };
    });
    $(".first-key").on("change", "input[name=photo2]", function() {
        $(this).prev().css("opacity","1")
        var filePath = $(this).val();//讀取圖片路徑
        //將圖片的URL賦值與hidden標簽內
        var fr = new FileReader();//創建new FileReader()對象
        var imgObj = this.files[0];//獲取圖片
        fr.readAsDataURL(imgObj);//將圖片讀取為DataURL
        var obj = $(this).prev()[0];//
        var arr = filePath.split('\\');
        var fileName = arr[arr.length - 1];
        $("#img2").removeClass("img");
        $("#img2").addClass("img2");
        $(this).parent().next().show();
        fr.onload = function() {
            obj.src = this.result;
            //將base64編碼后的圖片賦值到hidden標簽內
            $("#hid2").val(obj.src);
        };
    });
    console.log($("#hid2").val());
</script>

后端代碼：

//對字節數組字符串進行Base64解碼並生成圖片
if (idPhotoUrl == null || idPhotoUrl2 == null) { //圖像數據為空
    success(false);
}
 BASE64Decoder decoder = new BASE64Decoder();
byte[] b =new byte[0] ;
if(idPhotoUrl.contains("data:image/png;base64")){
    //Base64解碼
    b=decoder.decodeBuffer(idPhotoUrl.replace("data:image/png;base64,", ""));
}
if(idPhotoUrl.contains("data:image/jpeg;base64")){
    //Base64解碼
    b=decoder.decodeBuffer(idPhotoUrl.replace("data:image/jpeg;base64,", ""));
}
//idPhotoUrl = idPhotoUrl.replace("data:image/jpeg;base64,", "");
for (int i = 0; i < b.length; ++i) {
    if (b[i] < 0) {//調整異常數據
        b[i] += 256;
    }
}
//生成jpg圖片
Properties prop = new Properties();
InputStream ins = this.getClass().getResourceAsStream("/config/photoUrl.properties");
prop.load(ins);
String imgFilePath = prop.getProperty("PHOTOURL") + UUID.randomUUID() + ".jpg";//新生成的圖片
OutputStream out = new FileOutputStream(imgFilePath);
out.write(b);
out.flush();
out.close();
user.setIdPhotoUrl(imgFilePath);

byte[] b2 =new byte[0] ;
if(idPhotoUrl2.contains("data:image/png;base64")){
    //Base64解碼
    b2=decoder.decodeBuffer(idPhotoUrl2.replace("data:image/png;base64,", ""));
}
if(idPhotoUrl2.contains("data:image/jpeg;base64")){
    //Base64解碼
    b2=decoder.decodeBuffer(idPhotoUrl2.replace("data:image/jpeg;base64,", ""));
}
//idPhotoUrl = idPhotoUrl.replace("data:image/jpeg;base64,", "");
for (int i = 0; i < b2.length; ++i) {
    if (b2[i] < 0) {//調整異常數據
        b2[i] += 256;
    }
}
//生成jpg圖片
String imgFilePath2 = prop.getProperty("PHOTOURL") + UUID.randomUUID() + ".jpg";//新生成的圖片
OutputStream out2 = new FileOutputStream(imgFilePath2);
out2.write(b2);
out2.flush();
out2.close();

user.setIdPhotoUrl2(imgFilePath2);

properties文件：

     PHOTOURL=想放的文件夾絕對路徑