使用 base64 解决跨域上传

js文件：

(function () {
    window.onload = function(){
        var input = document.getElementById("demo_input");
        var result= document.getElementById("result");
        var img_area = document.getElementById("img_area");
        if ( typeof(FileReader) === 'undefined' ){
            result.innerHTML = "抱歉，你的浏览器不支持 FileReader，请使用现代浏览器操作！";
            input.setAttribute('disabled','disabled');
        }else{
            input.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);
        console.log();
        reader.onload = function(e){
            $('.userImg').attr('src', this.result); // 替换页面图片
        }
    }
})();

HTML 页面：

<!-- 可以提交地址或路由直接写在action中，利用iframe可以实现无跳转 -->
<form id="avatar" target="upload_photo_iframe" action="" method="post">
    <input type="file" value="" id="demo_input" style="display:none"/>
    <textarea style="display:none" name="img" id="result" rows=30 cols=300></textarea>
    <input type="submit" value="提交" style="display: none;">
</form>

<iframe id="update_photo_iframe" name="upload_photo_iframe" style="display: none;"></iframe>

控制器代码：

$base64_url=$img;

$base64_body = substr(strstr($base64_url,','),1);

$data= base64_decode($base64_body );

$newName = time() . '_' . rand(1,999) . '.jpg';

file_put_contents(config('app.avatar') . '/' . $newName,$data);