thinkphp5微信上传下载图片到本地

thinkphp5微信上传下载图片到本地

不是异步提交,可以自己修改为异步提交,js可以直接复制,不过微信配置请自己配置。


//表单提交action自己写路由
<form method="post" id="form" action="{:url('index/shouhou/do_save_cart')}">
    //这里是上传图片后,在js说关键的地方自己生产预览图并自动生成input隐藏域来给提交时候获取的图片id
    <div class="list-body"></div>
    //点击这个上传图片
    <div name="carimg[]" id="carimg"></div>
    //提交
    <input type="submit" class="am-u-sm-12 am-u-sm-centered xubaoanniu" value="提交" />
</form>
//这里js可直接用
{js href="http://cdn.quguonet.com/other/jquery.1.8.min.js"}
//引入微信借口
{js href="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"}
//图片上传js
{js href="http://cdn.quguonet.com/plupload/dist/js/plupload.full.min.js"}
<script type="text/javascript">
wx.config({
        debug: true, 
        appId: '', // 必填,公众号的唯一标识
        timestamp: '{$timestamp}', // 必填,生成签名的时间戳
        nonceStr: '{$wxnonceStr}', // 必填,生成签名的随机串
        signature: '{$wxSha1}',// 必填,签名,见附录1
        jsApiList: [
            'uploadImage',
            'chooseImage',
            'previewImage'
        ] // 必填,需要使用的JS接口列表,所有JS接口列表见附录2
    });

  function del(obj){
    if(confirm('确定删除图片吗')){
      $("#album"+obj).remove();
      is_upload_len--;
    }
  }

  function previewImage(obj){

    wx.previewImage({
        current: $(obj).attr('src'),
        urls: [$(obj).attr('src')]
    });
  }

  function upload(){

    var sum = $('.parent').length;

    if(ids[len]){
      var total_html = "正在上传第 "+(is_upload_len+1)+" 张,共"+sum+"张<p style='font-size:12px;margin:0'>相片为原图上传,建议连接wifi试用或移动4G网络上传</p><p style='font-size:12px;margin:0'>上传时请耐心等待</p>";
      $('#total').html(total_html);
      wx.uploadImage({
        localId: ids[len],
        isShowProgressTips: 1, // 默认为1,显示进度提示
        success: function (res) {

            var serverId = res.serverId; // 返回图片的服务器端ID
            $("#album"+list_len).find('.thumb').val(serverId);
            console.log(serverId) 
            list_len++;
            len++;
            is_upload_len++;
            upload();

        },
        error:function(err){
          alert('error'+err);
        }
      });
    }

  }

  // var loading  = $("#loading");
  // var callback = $("#callback");



  $('#carimg').click(function(){
    wx.chooseImage({
      count: 9, // 默认9
      sizeType: ['original'],
      sourceType: ['album'],
      success: function (res) {
          var localIds = res.localIds;
          $.each(localIds,function(i,v){
            //这里很关键name="pro['+l_len+'][thumb]"是传微信照片的id
            var htmls ='<div class="am-u-sm-6 parent" id=album'+l_len+'><div class="am-u-sm-12 no-padding"><div class="sub" style="text-align:center;height:100px"><i class="am-icon-close" onclick="del('+l_len+')"></i><img style="max-width:100%;max-height:100%"  onclick="previewImage(this)" onload="fixImage(this,100,100)" src="'+v+'" ></div></div><input type="hidden" name="pro['+l_len+'][thumb]" class="thumb"></div>';
            l_len++;
            // $(".sub").on('click',function(){
            //   alert(confirm("确定要删除图片吗?"))
            // })
            $(".list-body").append(htmls);

          })
          ids = localIds;
          len = 0;
          $('#total').fadeIn(500)
          upload();
      }
    });
  })
</script>

后台提交

//处理上传图片
    public function do_save_cart(){
        $post = $this->postdata;
        if(!empty($post['pro'])){
            //定义post过来的serverid
            $serverId = $post['pro'];
            //对象传入微信token
            $weixin = new Weixin;
            //一个获取微信token的方法
            $access_token = $weixin->wx_get_token();
            //微信图片接口
            $pic_url = "http://file.api.weixin.qq.com/cgi-bin/media/get?access_token=".$access_token."&media_id=".$serverId['0']['thumb'];
            //通过该地址接收图片流
            $filebody = file_get_contents($pic_url);
            //定义传过来的图片格式和名称
            $filename = uniqid().'.jpg';
            //保存路径,以时间作目录名称
            $upload_dir = ROOT_PATH . 'public' . DS . 'uploads'. DS .date("Ymd");
            $mkpath = $upload_dir;          
            if(!is_dir($mkpath)){  
                if(!mkdir($mkpath)){  
                    die('no mkdir power');  
                }  
                if(!chmod($mkpath,0755)){//若服务器在阿里云上不建议使用0644  
                    die('no chmod power');  
                }  
            }
            //拼接路径和自己定义的图片格式和名称
            $savepath = $upload_dir.'/'.$filename;
            //写入图片流生成图片
            if(file_put_contents($savepath, $filebody)){
                //这里就可以打印出保存的地址
                dump($savepath);
            }else{  
                die('save failed');  
            }  
        }
    }
  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值