首先写一个前端的上传代码 已经复制剪贴图片的前端代码
<form id="excelForm" action="http://gg116.daorc.com/douyinvideo_saveImportImg.action" method="post" enctype="multipart/form-data">
<div style="width:90%;height:100%;margin-left:50px">
<span style="float:left;margin-top:8px;">
<lable>
<font size="3px">选择文件</font>
</lable>
</span>
<input style="width:40%;margin-left:5px;float:left;" name="uploadFile" class="btn btn-info" type='file' id='excelUpload' multiple="multiple">
<br>
<input type="text" id="parseImg" style="width:40%;margin-left: -425px;float:left;margin-top: 50px;height: 30px;background-color: #548cfd;border: 0px;border-radius: 6px;font-size: 15px;color: white;padding: 18px;" value="粘贴图片"> <br>
<br/>
<button class="btn btn-success" id="imgbutton" style="float: left;margin-top: -64px;margin-left: 470px;" type="button">提交</button>
<button class="btn btn-success" id="buttontupian" style=" float: left; margin-top: 6px; margin-left: 470px; " type="button">提交</button>
<img src="" id="imgView" style=" float: left; margin-top: 85px; margin-left: -455px; "/>
</div>
</form>
然后是js 作用是复制图片以及上传图片
<script type="text/javascript">
//粘贴功能
document.getElementById("parseImg").addEventListener("paste", function (event) {
const clipboardData = event.clipboardData || event.originalEvent.clipboardData
const items = clipboardData.items;
console.log(items[0])
if (items.length > 0 && items[0].kind === "file") {
let blob = items[0].getAsFile()
let reader = new FileReader();
reader.readAsDataURL(blob);
reader.onload = function (e) {
console.log(e)
document.getElementById("imgView").src = e.target.result
};
} else {
alert("剪切板没图片内容")
}
})
//上传图片然后传到后台 用from表单进行提交数据
$("#imgbutton").click(function(){
$.ajax({
type: "post",
url:contextPath+"/douyinvideo_saveImportImg.action",
cache: false,
processData: false,
contentType: false,
dataType:'json',
data: new FormData($("#excelForm")[0]),
success:function(data){
if(data.status=="1"){
window.opener.postMessage(JSON.stringify({"data":data.data,"status":"1","method":"getImgView","type":"getImgView"}),'*');
window.close();
return;
}
}
})
})
//复制图片完成后会变成一个base64的临时文件 付给img标签的src属性
$("#buttontupian").click(function(){
//首先获取src属性的值
var imgurl = document.getElementById("imgView").src;
console.log(imgurl);
$.ajax({
type: "post",
url:contextPath+"/douyinvideo_saveImportImgjt.action",
dataType:'json',
//注意 这里一定要包装一下 直接传是穿不过去的 要转为字符串
data: {"imgurl": encodeURIComponent(JSON.stringify(imgurl))},
success:function(data){
if(data.status=="1"){
//成功下载上传图片
return;
}
}
})
})
</script>
最后是后端接收加密过的字符串
String imgBase64 = "接收的加密字符串";
//首先进行解密
try {
imgBase64 =URLDecoder.decode(imgBase64 ,"UTF-8");
} catch(UnsupportedEncodingException e) {
Debug.error("",e);
}
System.out.println("imgBase64 ="+imgBase64 );
String base64Data = imgBase64.split(",")[1];
String covertUrl="d:/img/search/";
// 检查目标文件夹是否存在,如果不存在则创建它
File targetFolder = new File(covertUrl);
if (!targetFolder.exists()) {
targetFolder.mkdirs();
}
// 构建目标文件的路径
String targetFilePath = covertUrl+"tupian1.jpg";
BASE64Decoder decoder = new BASE64Decoder();
try {
byte[] imgBytes = decoder.decodeBuffer(base64Data);
FileOutputStream fos = new FileOutputStream(targetFilePath);
fos.write(imgBytes);
fos.close();
} catch (IOException e) {
Debug.error(e);
}
下面是我单独写的main方法可以执行一下
下面是一个图片用base64转换的网站:可以参考一下 很好用
Base64 在线编码解码 | Base64 加密解密 - Base64.us
package com.xyj.a;
import java.io.File;
import java.io.FileOutputStream;
import java.io.IOException;
import sun.misc.BASE64Decoder;
public class base64 {
public static void main(String[] args) {
String imgBase64="";
String base64Data = imgBase64.split(",")[1];
String covertUrl="d:/img/search/";
// 检查目标文件夹是否存在,如果不存在则创建它
File targetFolder = new File(covertUrl);
if (!targetFolder.exists()) {
targetFolder.mkdirs();
}
// 构建目标文件的路径
String targetFilePath = covertUrl+"tupian1.jpg";
BASE64Decoder decoder = new BASE64Decoder();
try {
byte[] imgBytes = decoder.decodeBuffer(base64Data);
FileOutputStream fos = new FileOutputStream(targetFilePath);
fos.write(imgBytes);
fos.close();
} catch (IOException e) {
System.out.println(e); }
}
}