mui 框架自带的 Setting 模板会自动创建获取头像图片相关的功能，例如通过拍照或从手机相册中选择。
- 拍照：其原理是通过调用 android 或 ios 系统的相机，并为拍摄的图片设置路径与名字，然后将该 URL 作为 ![]() 标签的地址。
- 从手机相册中选择：比拍照更为简单，直接引用手机中已有图片的路径，将该 URL 作为 ![]() 标签的地址。
也就是说，MUI 框架模板的修改头像仅仅只是修改了 ![]() 标签的地址。那么该如何上传图片，真正意义上实现头像修改呢？
由于起初一直没能意识到 MUI生成的路径仅仅只是个字符串，而非是 file 对象，导致上传一直失败。心慌意乱之际，强迫自己冷静下来，仔细思索，再结合查阅所得资料，可以得出上传图片的两种形式：
- H5 <input type="file" name="myFile" />标签：你可以直接用表单上传，也可以使用 ajax 来异步上传。该方法直接上传 file 对象，后台接受到的是一个完整的文件，因此可以直接将接受到的对象直接进行移文件操作。下面的代码运用的就是该方法。
- base64 编码与解码：先在前端将图片转换（编码）成 base64 形式的字符串，然后将其传递给后台，后台获取到字符串（file_get_contents）后再将其解码，最后进行写文件操作（file_put_contents）。
HTML 部分：
<input id="file" type="file" name="file" />
<input type="button" onclick="XXX" value="上传头像" />
注意：查阅资料的时候发现一个“骚操作”：
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) {
// 回调函数
}
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);
}
}
