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