关于H5端大图上传的问题

关于H5端大图上传问题

关于在H5端上传图片，大图上传的问题及解决方案：

目前在手机端H5上上传手机拍照的图片，当用户群体太多的时候，如果不进行处理，服务器很容易出现并发撑不住，这个时候就需要对上传流程进行处理，以下针对这种情况提供几种解决方案

1.在PHP端进行压缩处理，然后再处理上传图片逻辑

在PHP进行压缩处理，同样会出现并发情况，给服务端造成压力，以下提供在PHP端处理压缩图片的逻辑，使用thinPHP3.2框架

Html

前端form表单代码：

<form id="addform" action="{:U('User/certification')}" onsubmit='return checkadd();' method="post" enctype="multipart/form-data">
 <ul>
    <li>
    <div class="replace">
        <input id="upload1" name='upload' class="upload" type="file" accept="image/*">
        <a id="photo1" class="photo"><img src="__IMG__/photo1.png" alt=""/>a>
    div>
    li>
    <li><a class="ment" href="javascript:add()">提交a>li>
     ul>
form>

<script type="text/javascript">
function add(){
   $('#addform').submit();
}
script>

PHP后端代码

    public function certification(){
        if(IS_POST){
            $data = array(); 
            $t1 = $this->uploadImage($_FILES['upload']['tmp_name']);
            $res =  api($this->upload_toll_url,array($t1));//获取压缩后的图片将图片提交至第三方JAVA提供的接收接口中 
        } 
        $this->display();
    }

//压缩图片的方法
  public function uploadImage($sourceFile) {  
        $rootPath = "./Uploads/"; //图片上传根目录  
        $image = new \Think\Image(); 
        /* 存储上传的图片列表 */ 
        $saveName = uniqid().'.jpg'; 
        $thumbPath = $rootPath. $saveName; //缩略图路径 
        //产生缩略图
        $image->open($sourceFile)->thumb(1200, 1200)->save($thumbPath);
        $arr['tmp_name'] = $_SERVER['DOCUMENT_ROOT']."/Uploads/".$saveName;
        $arr['name'] =  $saveName;
        return $arr;
    }

缺点：此处使用PHP后端压缩图片的方式同样会出现并发情况，建议手机端不进行此方式处理

2.在JS端进行压缩处理，然后丢给PHP后端处理上传图片逻辑

推荐使用此方法,在客户端进行压缩图片给服务端冲击力较小，用户体验更好，处理流程：先执行脚本使用AJAX提交单个图片，再进行表单提交单个图片（注意：提交表单的时候from不要带上 enctype=”multipart/form-data”）此处前端使用了layer插件和压缩图片的JS插件，下载

Html

前端form表单代码：

<form id="addform" action="{:U('User/certification')}" onsubmit='return checkadd();' method="post">
    <ul>
        <li>
        <div class="replace">
            <input id="upload1" onchange="uploadpic(1,this);" name='upload1' class="upload" type="file" accept="image/*">
            <input type='hidden' name='pic1' id='pic1' value=''>
            <a id="photo1" class="photo"><img src="__IMG__/photo1.png" alt=""/>a>
        div>
        li>
        <li><a class="ment" href="javascript:add()">提交a>li>
    ul>
form>

<script type="text/javascript">
          function  uploadpic(id,obj){
              // var index = layer.load(1, {shade: [0.5,'#000'] });
             lrz(obj.files[0], {width: 800}, function (results) {
            // 你需要的数据都在这里，可以以字符串的形式传送base64给服务端转存为图片。
              $.ajax({
                    url: "{:U('uploadpic')}", 
                    type: 'POST',
                    data : { 
                      base64:results.base64
                    },
                    dataType: 'json', //返回值类型，一般设置为json、application/json  这里要用大写  不然会取不到返回的数据 
                    beforeSend:function(result){
                        layer.load(1, {shade: [0.5,'#000'] });
                    }, 
                    success: function(data){  
                        layer.closeAll();
                        if(data.code=='0'){
                          $('#pic'+id).val(data.data); 
                          layer.msg('上传成功！');
                          $('#photo'+id).html(''" alt="" />'); 
                        }else{
                          layer.msg(data.data);
                          $('#photo'+id).html("");
                          $('#pic'+id).val('');
                        } 
                    },
                    error: function(data, status, e){ 
                      layer.closeAll();
                      $('#pic'+id).val('');
                      $('#photo'+id).html("");
                      layer.msg('异常信息！请稍后再试！');  
                    }
              }); 
             });
            return false; 
        }
function add(){
   $('#addform').submit();
}
script>
<script type="text/javascript" src="__JS__/jquery-1.9.1.min.js">script>
<script type="text/javascript"  src="__JS__/layer/layer.js">script> 
<script src="__JS__/mobileFix.mini.js">script>
<script src="__JS__/exif.js">script>
<script src="__JS__/lrz.js">script>  

PHP

    public function certification(){
        if(IS_POST){
            $data = array(); 
            $data['imgPersonPath'] = I('pic1');
            $res =  api($this->upload_toll_url,array($data));//获取压缩后的图片将图片提交至第三方JAVA提供的接收接口中 
        } 
        $this->display();
    }

//压缩图片的方法
    //上传图片
    public function uploadpic(){ 
        $filename = uniqid().'.jpg';  
        //获取base64位图片流  解析出二进制图片数据
        $img = explode(',',I('base64')); 
        file_put_contents("./Uploads/".$filename, base64_decode($img[1])); 
        $arr['tmp_name'] = $_SERVER['DOCUMENT_ROOT']."/Uploads/".$filename;
        $arr['name'] =  $filename; 
        $result = api($this->upload_toll_url,array($arr));  
        if($result){
            $data['code'] = 0;
            $data['data'] = $result['imgPath'];
        }else{
            $data['code'] = 'Error';
            $data['data'] = '上传图片接口返回异常，请稍后再试！';
        }
        $this->ajaxReturn($data);
    }