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

2019-11-09 14:15:28

字体：大中小

来源：转载

供稿：网友

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'); } } }

上一篇：微信公众平台开（php）发之微信卡券sdk

下一篇：thinkphp5.x中集成微信JS-SDK