此章阐述如何在移动端,把图片上传到服务器上,再存储到本地的文件夹之中,这种需要在当今比比皆是,比如,当用户使用设备时,或者购买东西时,遇到了问题,就可以通过拍照,用图片的方式上传到服务器接口,从而服务器可以看到客户上传反馈的某些事。
所以归根结底,从以下几点逻辑说:
- App写一个表单,一个上传按钮;
- Js获取到传入的图片,然后传到ajax服务器接口;
- 将图片转Base64格式,发送到Sevrlet;
- Sevrlet服务器接收App传入的Base64格式图片;
- Base64转图片,再进行创建本地目录,保存图片路径;
一:App端(我用H5进行测试),原生态开发的也一样的逻辑;
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>login</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.demo{
width: 50%;
height: 50%;
margin: 50px;
}
</style>
</head>
<body>
<form id="form">
<div class="demo">
<input type="file" id="img_upload" />
<textarea id="base64_code" rows="30" cols="100"></textarea>
<p id="img_area"></p>
</div>
<button type="button" id="gettypedata">AJAX功能</button>
</form>
</body>
<script type="text/javascript" src="js/jquery-1.7.2.min.js" ></script>
<script>
window.onload = function() {
// 抓取上传图片,转换代码结果,显示图片的dom
var img_upload = document.getElementById("img_upload");
console.log(img_upload);
var base64_code = document.getElementById("base64_code");
console.log(base64_code);
var img_area = document.getElementById("img_area");
console.log(img_area);
// 添加功能出发监听事件
img_upload.addEventListener('change', readFile, false);
}
function readFile() {
var file = this.files[0];//这里是抓取到上传的对象。
if(!/image\/\w+/.test(file.type)) {
alert("请确保文件为图像类型");
return false;
}
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function() {
base64_code.innerHTML = this.result;
//this.result里的这个result是FileReader.readAsDataURL()接口当中转换完图片输出的base64结果存放在result当中
img_area.innerHTML = '<div>图片img标签展示:</div><img src="' + this.result + '" alt=""/>';
console.log(this.result);
$.ajax({
url: 'http://127.0.0.1:8080/你的服务器接口Sevrlet?action=registerUser',
data:{
useremail:this.result
},
dataType:'json',//服务器返回json格式数据
type:'post',//HTTP请求类型 ......
success:function(data){
console.log(JSON.stringify(data));
}
});
}
}
});
</script>
用谷歌浏览器测试,上传图片你会看到:
二:Sevrlet端(Eclipse开发的接口)
private int a=0;
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
response.setContentType("text/html;charset=utf-8");
request.setCharacterEncoding("utf-8");
response.setCharacterEncoding("utf-8");
response.setHeader("Access-Control-Allow-Origin", "*");
String actionString = request.getParameter("action");
//注册接口功能
if(actionString.equals("registerUser")){
String useremail =request.getParameter("useremail").replace(" ", "+");
int index = useremail.lastIndexOf(",");
if(index != -1) {
useremail = useremail.substring(index+1);
}//去除ata:image/jpeg;base64,前缀
Decoder decode = Base64.getDecoder();
byte[] byteImg = decode.decode(useremail);//把base64转成字节码
for (int i = 0; i < byteImg.length; ++i) {
if (byteImg[i] < 0) {// 调整异常数据
byteImg[i] += 256;
}
}
/*
* 创建文件夹
*/
String root = this.getServletContext().getRealPath("/");
System.out.println(root);
a++;//这个就是转换后的图片的名字变量,每次存储,它会累加,为文件夹的名字;
File dirFile = new File(root+ "/upload");//取前16进制的前两个字符串创建二级目录
System.out.println(dirFile);
dirFile.mkdirs();//创建目录
String ret_fileName = new String(("/"+a)+".jpg"); //本地文件夹图片路径
System.out.println(ret_fileName);
//String imgNewName = CommonUtils.unid()+".jpg";
OutputStream out = new FileOutputStream(dirFile+ret_fileName);//保存
out.write(byteImg);//写入文件
out.flush();
out.close();
System.out.println(out);
String newAdd = this.getServletContext().getContextPath()+"/";
System.out.println(newAdd);
response.getWriter().write("{\"src\":\""+newAdd+"\"}"); //返回到前端页面
}
}
代码图:
DeBug出来的结果:
进入本地文件夹:
最后看本地文件夹,奇迹出现了… 就是这么酷。
注意:
1,你在Sevrlet设定的jpg格式的话,当你在APP端传入png格式,也是可以传成功的,但存入的是jpg格式,因为你服务器端就指定了图片路径是jpg的后缀;
2,如果要根据app传来的格式存入本地,那么就在服务器端接收的时候判断,它的格式是什么格式,png还是jpg,或者其他格式,这样就会格式也一样的了。
啦啦。本章节就阐述到此为止了,希望对每位看官有所帮助,如果觉得有所帮助,别忘了点赞哟,谢谢您的阅读,后续还会继续发表更深刻的博文,给我们志同道合的朋友们,相互学习。Baby~