此章闡述如何在移動端，把圖片上傳到服務器上，再存儲到本地的文件夾之中，這種需要在當今比比皆是，比如，當用戶使用設備時，或者購買東西時，遇到了問題，就可以通過拍照，用圖片的方式上傳到服務器接口，從而服務器可以看到客戶上傳反饋的某些事。
所以歸根結底，從以下幾點邏輯說：
- 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～