2017-08-18 10:28:07 4167次浏览 3条回答 0 悬赏 100 金钱

现在有个需求:上传头像,先剪切,最后把剪切的图片上传到服务器,这个时候我只能拿到剪切图片的base64流数据。我要根据这个数据把图片上传到另一台服务器(专门放图片文件的服务器)并且返回图片url,我应该怎么弄???

找到一种方法(这个方法最后生成的图片后缀是.blob的):
参考:http://blog.csdn.net/wang_long_989/article/details/52535897

$('#bt).click(function(){
    var imgUrl = $('#cut_photo').attr('src'); //base64流数据
    sumitImageFile(imgUrl,thisObj);
});

 function sumitImageFile(base64Codes,thisObj){
        var form = document.forms[0];

        var formData = new FormData(form);   //这里连带form里的其他参数也一起提交了,如果不需要提交其他参数可以直接FormData无参数的构造函数

        //convertBase64UrlToBlob函数是将base64编码转换为Blob
        formData.append("imageName",convertBase64UrlToBlob(base64Codes));  //append函数的第一个参数是后台获取数据的参数名,和html标签的input的name属性功能相同  imageName相当于type='file'的name属性
        formData.append("type",'2'); //type = 2是头像类型
//        formData.append("suffix",'jpg,JPG,png,PNG'); //图片格式
        //ajax 提交form
        $.ajax({
            url : '',
            type : "POST",
            data : formData,
            dataType:"json",
            processData : false,// 告诉jQuery不要去处理发送的数据
            contentType : false,// 告诉jQuery不要去设置Content-Type请求头

            success:function(data){
                if (data.state) {
                    $('.sub_img>img').attr('src',data.fileUrl);
                    //alert(data.fileUrl)
                    //把头像入库
                     
                   } else {
                       errorTest(thisObj.parent(".layer-btn").siblings(".msg-con"),data.msg,$(".new_call"));
                      //alert(data.msg);
                   }
            },
            xhr:function(){ //在jquery函数中直接使用ajax的XMLHttpRequest对象
                var xhr = new XMLHttpRequest();
                xhr.upload.addEventListener("progress", function(evt){
                    if (evt.lengthComputable) {
                        var percentComplete = Math.round(evt.loaded * 100 / evt.total);  
                        console.log("正在提交."+percentComplete.toString() + '%');        //在控制台打印上传进度
                    }
                }, false);

                return xhr;
            }

        });
    }

/**
 * 将以base64的图片url数据转换为Blob
 * @param urlData
 * 用url方式表示的base64图片数据
 */
function convertBase64UrlToBlob(urlData){
    var bytes=window.atob(urlData.split(',')[1]);//去掉url的头,并转换为byte
    
    //处理异常,将ascii码小于0的转换为大于0
    var ab = new ArrayBuffer(bytes.length);
    var ia = new Uint8Array(ab);
    for (var i = 0; i < bytes.length; i++) {
        ia[i] = bytes.charCodeAt(i);
    }

    return new Blob( [ab] , {type : 'image/png'});
}
  • 回答于 2017-08-18 10:56 举报

    // $base_img是获取到前端传递的src里面的值,也就是我们的数据流文件
    $base_img = str_replace('data:image/jpg;base64,', '', $baseimg);
    // 设置文件路径和文件前缀名称
    $path = "./";
    $prefix='nx
    ';
    $output_file = $prefix.time().rand(100,999).'.jpg';
    $path = $path.$output_file;
    // 创建将数据流文件写入我们创建的文件内容中
    $ifp = fopen( $path, "wb" );
    fwrite( $ifp, base64_decode( $base_img) );
    fclose( $ifp );
    // 第二种方式
    // file_put_contents($path, base64_decode($base_img));
    // 输出文件
    print_r($output_file);

    3 条回复
    回复于 2017-08-18 12:29 回复

    这个不支持跨域吧 图片要放到其他服务器的

    回复于 2017-08-18 13:03 回复

    你把收到的数据转发其他域去处理不行?
    如果你能直接上传图片,你把图片写到本地目录再上传。

    回复于 2017-08-18 13:05 回复

    我现在是没有type='file'这个的 不知道怎么上传 因为我剪切好了 这个时候其实已经没有type='file'了

  • 回答于 2017-08-18 14:06 举报

    function imgUpload($url,$imgName,$path='./'){

        $data = array(
            'file'=>new \CURLFile(realpath($path.'/'.$imgName)),
        );
         $ch=curl_init();
         curl_setopt($ch, CURLOPT_URL, $url);
         
         curl_setopt($ch, CURLOPT_HEADER, 0);
         curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
         curl_setopt($ch, CURLOPT_POST, 1);
         curl_setopt($ch, CURLOPT_POSTFIELDS, $data);
         curl_setopt($ch, CURLOPT_TIMEOUT,60);
         $output = curl_exec($ch);
         curl_close($ch);
         unlink($path.'/'.$imgName);
         return $output;
    }
    

    这个方法你试试

    2 条回复
    回复于 2017-08-18 14:27 回复

    三个参数($url是文件服务器域名吗?$imgName是图片名字?)这个和已知的base64流这个数据没关系呀?

    回复于 2017-08-20 18:02 回复

    这个是后端上传,也就是你把这个图片先正常途径存到本地,然后本地后端传到跨域的另外服务器. 至于这个图片怎么存放,看你跨域的服务器上程序处理.

  • 回答于 2017-08-21 10:25 举报

    Curl FIle

您需要登录后才可以回答。登录 | 立即注册
xyf90314
副总裁

xyf90314

注册时间:2015-03-04
最后登录:2023-03-13
在线时长:95小时23分
  • 粉丝21
  • 金钱5257
  • 威望40
  • 积分6607

热门问题