php微信h5上传文件,微信公众号开发h5,上传图片

1.获取微信开放功能的基础参数配置,类似分享功能,定位功能也都需要获取改参数,

注意:需要配置授权域名链接

需要配置ip白名单

wx.config({

debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。

appId: '{$weixin.appId}', // 必填，公众号的唯一标识

timestamp: '{$weixin.timestamp}', // 必填，生成签名的时间戳

nonceStr: '{$weixin.nonceStr}', // 必填，生成签名的随机串

signature: '{$weixin.signature}', // 必填，签名，见附录1

jsApiList: [

'onMenuShareTimeline',

'onMenuShareAppMessage',

'onMenuShareQQ',

'onMenuShareWeibo',

'openLocation',

'chooseWXPay',

'chooseImage', // 这里需有选择图片,上传图片的功能,

'uploadImage'

]

});

wx.ready(function () {

// wx.onMenuShareAppMessage({

// title: '标题', // 分享标题

// desc: `描述`, // 分享描述

// link: `http://*******/wx.php`, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致

// imgUrl: 'https://cdn.caomall.net/15606006301896208141.jpg', // 分享图标

// success: function () {

// // 用户确认分享后执行的回调函数

// },

// cancel: function () {

// // 用户取消分享后执行的回调函数

// }

// });

// wx.onMenuShareTimeline({

// title: '标题', // 分享标题

// desc: `描述`, // 分享描述

// link: `http://*******/wx.php`, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致

// imgUrl: 'https://cdn.caomall.net/15606006301896208141.jpg', // 分享图标

// success: function () {

// // 用户确认分享后执行的回调函数

// },

// cancel: function () {

// // 用户取消分享后执行的回调函数

// }

// });

});

选择图片,上传图片

注意:微信开发工具不可真正上传,但流程都中转参数都对的,仔细观察会发现上传的severId是不变的----这个就是微信的坑了!!!!!

必须用手机上传,没张图片上传可能需要些时间;var pics = [];

$('#add_btn_1').on('click',function(){

let max_count = 3;

if(pics.length >= max_count){

return alert('最多3张');

}

//alert('sss');

wx.chooseImage({

count: max_count - pics.length, // 默认9

sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有

sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有

success: function (res) {

console.log(res);

var localIds = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片

new Promise(function(resolve,reject){

for(var i = 0;i< localIds.length;i++){

wx.uploadImage({

localId: localIds[i], // 需要上传的图片的本地ID，由chooseImage接口获得

isShowProgressTips: 1, // 默认为1，显示进度提示

complete: function (res) {

console.log('-----');

console.log(res);

var serverId = res.serverId; // 返回图片的服务器端ID

$.ajax({

type : 'POST',

dataType : 'json',

url : '/api.php/Upload/uploadServerId',

data : { serverId },

success : function(data){

if(!data.errno){

console.log(data);

pics.push(data.data);

} else {

return alert(data.errdesc);

}

},error : function(){

alert('网络错误');

}

});

}

});

}

setTimeout(function(){

resolve(pics);

},1500 * localIds.length); // 一张上传时间比较长....2s

}).then(function(pics){

console.log('then---执行');

let ejs_data = [];

ejs_data.data = pics;

console.log('ggggggggggggggggggggg');

console.log(ejs_data);

var ec_canvs = new EJS({ element: "ejs_pics_id"}).render(ejs_data); // 这里用ejs,实现上传多图样式拼接;

$("#imageWrap").html(ec_canvs);

})

}

});

});

上传media_id,生成图片,上传到我们自己服务器功能

/**

* 微信公众号 上传图片

*/

public function uploadServerId() {

if (!$serverId = $_POST['serverId']) {

$this->json->E('缺少serverId',10001);

}

$url = C('PROXY_HOST') . 'Media/getMediaImg';

$params = [

'media_id' => $serverId

];

$cdn_result = Http::newDoPost($url,$params);

$cdn_result = json_decode($cdn_result, true);

setlog($cdn_result,[],'','up.log');

if ((int)$cdn_result['code'] === 1) {

$this->json->S($cdn_result['data']);

} else {

$this->json->E('服务器繁忙');

}

}

namespace Proxy\Action;

use Vendor\Func\Func;

use Vendor\Func\Http;

use Vendor\Qiniu\Qiniu;

class MediaAction extends CommonAction

{

// 获取媒体数据

//http://file.api.weixin.qq.com/cgi-bin/media/upload

const API_MEDIA_GET = 'http://file.api.weixin.qq.com/cgi-bin/media/get';

public function getMediaImg() {

$access_token = $this->_get_access_token();

// 获取参数

$media_id = $_POST['media_id'];

$params = [

'access_token' => $access_token,

'media_id' => $media_id,

'type' => 'thumb' // 这里用image,可能太大会上传不了;

];

$result = Http::newDoGet(self::API_MEDIA_GET, $params);

$decode_res = json_decode($result,true);

if($decode_res['errcode'] != 0){

$this->ajaxReturn($this->jsonError(10021, $decode_res['errmsg']));

}

// 存入cdn

$cdn_result = $this->uploadCdn($result); // 上传cdn, 具体功能函数省略...

//setlog($cdn_result,[$result],'media_result','proxy_error_2.log');

setlog($cdn_result,[],'media_result','proxy_error_222.log');

if ((int)$cdn_result['errno'] === 0) {

$this->ajaxReturn($this->jsonSuccess(1, '成功', $cdn_result['save_name']));

} else {

$this->ajaxReturn($this->jsonError(10001, '服务器繁忙'));

}

}

}

?>

参考博客https://www.jb51.net/article/161349.htm

https://www.cnblogs.com/fanshuyao/p/6227130.html

https://blog.csdn.net/zzwwjjdj1/article/details/52354763

https://developers.weixin.qq.com/doc/offiaccount/Asset_Management/Get_temporary_materials.html

参考微信开放手册https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html#19

https://mp.weixin.qq.com/debug/cgi-bin/apiinfo?t=index&type=%E5%9F%BA%E7%A1%80%E6%94%AF%E6%8C%81&form=%E5%A4%9A%E5%AA%92%E4%BD%93%E6%96%87%E4%BB%B6%E4%B8%8A%E4%BC%A0%E6%8E%A5%E5%8F%A3%20/media/upload

来源：https://www.cnblogs.com/pansidong/p/13330429.html