微信上传图片接口的使用

实现功能: 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() 方法写入图片流生成图片,并返回图片路径:

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20180728G1N2AD00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

扫码关注云+社区

领取腾讯云代金券