实现功能: h5调用微信上传图片接口上传图片并下载图片保存到服务器
首先看一下流程:
1、点击 “上传图片” 按钮:
2、调出微信上传图片控件,选择或者拍摄图片:
3、选择好图片后,点击确定就开始上传图片:
4、图片上传成功后自动刷新后显示最新3张图片,此时图片是保存在微信服务器:
5、后台将新上传的图片下载并保存到自己的服务器指定的文件夹中:
功能实现代码如下:
html代码:
读取服务器中保存的图片,并显示最新上传的3张图片;
“上传图片” 按钮,功能是调出微信上传图片控件,选择或者拍摄图片。
js代码:
(1)调用相机或相册上传图片
(2)syncUpload() 调用wx.uploadImage() 上传图片到微信服务器
读取 chooseImage() 传过来的 图片本地ID数组 localIds 里的图片本地ID localId;
调用wx.uploadImage(),把localId对应的图片上传到微信服务器,每次只能上传一张 ;
上传成功后,把返回的图片的微信服务器端ID插入到新数组 serverIdArr 中,然后判断图片本地ID数组 localIds 是否为空,即数组长度是否大于0;
如果大于0,表示还有图片需要继续上传,继续调用 syncUpload() 继续执行上传图片操作 ;
如果所有图片上传成功,则把 保存了所有图片的微信服务器端ID的数组 serverIdArr post到php后台进行图片的本地服务器下载保存操作处理。
php代码:
(1)获取前端传过来的图片服务器ID,循环数组调用 doWechatPic() 函数处理:
(3)调用 file_put_contents() 方法写入图片流生成图片,并返回图片路径:
领取专属 10元无门槛券
私享最新 技术干货