mui 框架自帶的 Setting 模板會自動創(chuàng)建獲取頭像圖片相關(guān)的功能，例如通過拍照或從手機相冊中選擇塞祈。
- 拍照：其原理是通過調(diào)用 android 或 ios 系統(tǒng)的相機，并為拍攝的圖片設(shè)置路徑與名字，然后將該 URL 作為 ![]() 標簽的地址酷鸦。
- 從手機相冊中選擇：比拍照更為簡單荆责，直接引用手機中已有圖片的路徑滥比，將該 URL 作為 ![]() 標簽的地址。
也就是說做院，MUI 框架模板的修改頭像僅僅只是修改了 ![]() 標簽的地址盲泛。那么該如何上傳圖片，真正意義上實現(xiàn)頭像修改呢键耕？
由于起初一直沒能意識到 MUI生成的路徑僅僅只是個字符串寺滚，而非是 file 對象，導致上傳一直失敗屈雄。心慌意亂之際村视，強迫自己冷靜下來，仔細思索酒奶，再結(jié)合查閱所得資料蚁孔，可以得出上傳圖片的兩種形式：
- H5 <input type="file" name="myFile" />標簽：你可以直接用表單上傳奶赔，也可以使用 ajax 來異步上傳。該方法直接上傳 file 對象勒虾，后臺接受到的是一個完整的文件纺阔，因此可以直接將接受到的對象直接進行移文件操作。下面的代碼運用的就是該方法修然。
- base64 編碼與解碼：先在前端將圖片轉(zhuǎn)換（編碼）成 base64 形式的字符串笛钝，然后將其傳遞給后臺，后臺獲取到字符串（file_get_contents）后再將其解碼愕宋，最后進行寫文件操作（file_put_contents）玻靡。
HTML 部分：
<input id="file" type="file" name="file" />
<input type="button" onclick="XXX" value="上傳頭像" />
注意：查閱資料的時候發(fā)現(xiàn)一個“騷操作”：
image.png
JS 部分：
var file = document.getElementById("file").files[0],
form = new FormData(),
req = new XMLHttpRequest();
form.append("file", file);
req.onreadystatechange = function() {
if(req.readyState === 4 && req.status === 200) {
// 回調(diào)函數(shù)
}
req.open("post", 'URL', true);
req.send(form);
PHP 部分：
if(isset($_FILES['file'])) {
$file = $_FILES['file'];
$uploadDir = 'head'.DIRECTORY_SEPARATOR;
$dir = dirname(dirname(__FILE__)).DIRECTORY_SEPARATOR.$uploadDir;
file_exists($dir) || (mkdir($dir,0777,true) && chmod($dir,0777));
if(!is_array($file["name"])) {
$fileName = 'picture.png';
move_uploaded_file($file["tmp_name"], $dir.$fileName);
}
}
