上傳頭像的實現思路，以前就有的，不過二次修改移動框架的時候，被自己給坑了。所以記一下吧，方便路過的朋友。
分析用戶操作，一般都是前端選中圖片后，做本地預覽。然后submit提交給后端服務器。
這邊記錄下，自己的思路。
第一步：選擇圖片
第二步，通過選擇事件，選擇圖片，然后提交服務器。等待服務器返回圖片上傳好的路徑后。做本地展示。（更高級的操作是，先加載本地預覽，上傳成功后替換本地預覽）。
第三步，點擊提交按鈕。上傳當前服務器返回的文件名，存入數據庫。然后重新加載本頁面。新用戶頭像上傳完畢。
這方法有缺陷，但是簡單直接，大家可能會想到服務器上圖片多出來了。不過這個是在登陸成功以后操作。在上傳前可以判斷先用戶是否登陸。若想刪除沒用到的圖片。那就要辛苦下，后端做個查詢。然后操作文件刪除。
可能有人會說，給前端留個刪除圖片。
//上傳頭像-后端接收方法(thinkphp-框架)
public function upload(){
// 獲取上傳文件表單字段名，不傳文件會報錯。
$fileKey = array_keys(request()->file());//獲取文件名。
$file = request()->file($fileKey['0']);//如果想傳多圖。偷懶，循環下這個方法。多拿幾個
$info = $file->validate(['ext' => 'jpg,png,gif,jpeg'])->move('uploads');//判斷圖片類型。
$result['code'] = 1;
$result['title'] = '頭像!';
$path=str_replace('\\','/',$info->getSaveName());//移動后拿到的文件名稱
$result['url'] = '/uploads/'. $path;//拼接返回目錄，跟前端做顯示准備
return json(['code'=>0, 'msg'=>'上傳成功', 'data'=>$result]);//json返回數據。如果要考慮錯誤情況，可以在加個判斷。
}
//前端靜態頁面代碼 .注意點
{1.id=form4
2. class="upload-btn"
3.input框中的 onchange方法（upload_cover上傳方法）。id='picture_upload'
4.隱藏的newhead方法。默認值為空，因為沒有值要傳。
5.MyButton1=提交圖片上傳以后的newhead值，給后端的。
}
<form id="form4">
<div class="upload-btn">
<button class="btn btn-submit" >選擇要上傳的圖片 <input onchange="upload_cover(this)" id="picture_upload" name="file" type="file" class="upload-input"></button>
</div>
<div class="btn btn-tj">
<input type="hidden" value="" name="newhead" id="newhead" />
<input type="submit" value="確定提交" id="MyButton1" class="btn btn-submit">
</div>
</form>
//上傳圖片
function upload_cover(obj) {//obj就是input文件框的所有內容
ajax_upload(obj.id, function(data) {//匿名函數，執行上傳成功以后的操作。核心在ajax_upload方法中。
console.log('test');//obj.id=picture_upload 給上傳js
var isrc = data.data.url.replace(/\/\//g, '/');//
console.log(isrc);
$('.avatarimg').attr('src',isrc); //給<input>的src賦值去顯示圖片
// //更換頁面顯示4個圖
$('.rightimg').attr('src',isrc); //給<input>的src賦值去顯示圖片
$('#newhead').attr('value',isrc);//顯示成功后，就該提交form表單了。
});
}
function ajax_upload(feid, callback) {//feid上傳圖片插件要通過這個id,也就是picture_upload 來拿文件資源。callback為這個函數的回調值，會返給upload_cover方法，做頁面顯示時使用。
$.ajaxFileUpload({
fileElementId: feid,
url:"/index.php/home/webmember/upload",//上傳文件的路徑
type: 'post',//傳輸方式。大小在7mb,左右，不要超限制，或者看下后端最大圖片限制。
dataType: 'json',//數據類型
secureuri: false,//是否安全模式
async : true,//是否是異步
success: function(data) {
if (callback) callback.call(this, data);//如果有回調，返回給調用的方法。
},
error: function(data, status, e) { //提交失敗自動執行的處理函數。
console.error(e);//控制台輸出，方便前端調試。
}
});
}
//前端驗證圖片格式是否在要求的格式內，這里沒有用，因為后端已經驗證了。
function image_check(feid) { //自己添加的文件后綴名的驗證
var img = document.getElementById(feid);
return /.(jpg|png|gif|bmp)$/.test(img.value)?true:(function() {
layer.msg('圖片格式僅支持jpg、png、gif、bmp格式，且區分大小寫.');
return false;
})();
}
//
//更換頭像確認操作
$(document).on('click', '#MyButton1', function () {
//檢查字段.后端驗證。這里能提交一個，那一個頁面就能提交多個，希望對大家有幫助。
$.ajax({
type: "POST",
dataType: "json",
url: "/index.php/home/webmember/upavatar" ,//修改頭像接口
data: $('#form4').serialize(),//這里寫下為什么用這個，前端對這個id下面的form4做了序列化操作。發送到后端，所有的當前form中，input,只要帶name屬性的，都能接收到。前端知識，還沒被廢棄，個人覺得挺好用的。后端接收也很輕松。
success: function (res){
layer.msg(res.msg)
setInterval(function () {
window.location.reload()
}, 2000)
},
error : function() {
alert("異常提交");
}
});
})
備注：ajaxFileUpload這是一個前端js，相當於是一個插件。只要引入就可以了。記得還要jquery.
//可以直接下載，或者引用。
http://www.y1360.com/static_index/js/ajaxfileupload.js