微信端调取相册和摄像头功能,实现图片上传,并上传到服务器

所属分类: 网络编程 / JavaScript 阅读数: 397
收藏 0 赞 0 分享

最近在做微信公众号网页开发,遇到两个需要用到微信的JSSDK,上传图片和自动定位,微信开发者文档有详细的步奏内容,链接点击进入微信开发者文档 ,也可以看看我这篇文章,看我是如何实现的。

首先第一步,需要在页面引入微信的JS文件(http和https都行)

<script src="https://cdn.zhanzhang360.cn/imgupload/006301/jweixin-1.2.0.js"></script>

第二步,获取签名

后台会给前端一个接口,前端通过这个接口发送请求获取必要的签名信息,并进行配置

sendAjax.weixin.getSdkSign({'传入参数'},function(msg){
    let sdkSign = msg.sdkSgin; // 后台返回的值
   wx.config({
    debug: false, // 因为在手机上测试没法打印,当debug为true时,所有的返回值都会在手机上alert出来
    appId: sdkSign.appId, // 必填,公众号唯一标识
    timestamp: sdkSign.timestamp, // 必填,生成签名的时间戳
    nonceStr: sdkSign.nonceStr, // 必填,生成签名的随机串
    signature: sdkSign.signature,// 必填,签名
    jsApiList: ['chooseImage','uploadImage'] // 必填,需要使用的JS接口列表,需要用到什么接口就去开发者文档查看相应的字段名
   });
});

其中,sendAjax.weixin.getSdkSign 是我个人自己封装的ajax请求,不用多在意。

第三步,就是上传图片了,相信一般都是一个点击事件来调取微信的相册和摄像头功能。在事件方法中按以下方式写

wx.chooseImage({
    count: 1, // 最多可以选择的图片张数,默认9
    sizeType: ['original', 'compressed'], // original 原图,compressed 压缩图,默认二者都有
    sourceType: ['album', 'camera'], // album 从相册选图,camera 使用相机,默认二者都有
    success: function (res) {
     let localIds = res.localIds; // 返回选定照片的本地ID列表(手机上操作就是手机端的ID列表,是一个数组),localId可以作为img标签的src属性显示图片
     wx.uploadImage({
      localId: localIds[0], // 需要上传的图片的本地ID,由chooseImage接口获得
      isShowProgressTips: 1, // 默认为1,显示进度提示
      success: function (result) {
       let serverId = result.serverId; // 返回图片的服务器端ID
         // 可以将serverId传给后台,用于存放在自己服务器上
      }
     });
    },
    fail: function() {},
    complete: function() {}
});

需要注意的是,chooseImage是调取微信相册和摄像头功能。其中count是可选择的,localIds是一个数组,当只上传一张图片时,localIds[0]可直接用来作为需要上传图片位置的路径,不用再拼接其他东西。

uploadImage是将本地图片上传到服务器,至于怎么上传,这应该是后端的事了,你只需要保证localIds这个数组正确即可。

至此,微信端调取相册和摄像头功能,实现图片上传,并上传到服务器功能基本就实现了,有疑问或者不对的地方欢迎留言。

以上所述是小编给大家介绍的微信端调取相册和摄像头功能图片上传服务器详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

更多精彩内容其他人还在看

jQuery控制input只能输入数字和两位小数的方法

这篇文章主要介绍了jQuery控制input只能输入数字和两位小数的相关知识,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
收藏 0 赞 0 分享

Vue模板语法中数据绑定的实例代码

这篇文章主要介绍了Vue模板语法中数据绑定的实例代码,非常不错,具有一定的参考借鉴价值 ,需要的朋友可以参考下
收藏 0 赞 0 分享

详解 微信小程序开发框架(MINA)

小程序使用的是MINA框架,目的是通过简单、高效的方式让开发者可以在微信中开发具有原生App体验的服务。 这篇文章主要介绍了微信小程序开发框架(MINA),需要的朋友可以参考下
收藏 0 赞 0 分享

jQuery实现的点击显示隐藏下拉菜单功能完整示例

这篇文章主要介绍了jQuery实现的点击显示隐藏下拉菜单功能,结合完整实例形式分析了jQuery事件响应及页面元素属性动态操作简单实现技巧,需要的朋友可以参考下
收藏 0 赞 0 分享

angular4应用中输入的最小值和最大值的方法

这篇文章主要介绍了angular4应用中输入的最小值和最大值的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

150行代码带你实现微信小程序中的数据侦听

在这篇文章中, 我将用150行代码, 手把手带你打造一个小程序也可以使用的侦听器,感兴趣的朋友跟随小编一起看看吧
收藏 0 赞 0 分享

javascript异步编程的六种方式总结

这篇文章主要介绍了javascript异步编程的六种方式总结,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

JS实现的自定义map方法示例

这篇文章主要介绍了JS实现的自定义map方法,结合实例形式分析了javascript自定义map相关的json数组定义、遍历、添加、删除、读取等相关操作技巧,需要的朋友可以参考下
收藏 0 赞 0 分享

微信小程序云开发(数据库)详解

使用云开发开发微信小程序、小游戏,无需搭建服务器,这篇文章主要为大家详细介绍了微信小程序云开发数据库,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
收藏 0 赞 0 分享

JS简单数组排序操作示例【sort方法】

这篇文章主要介绍了JS简单数组排序操作,结合实例形式分析了javascript使用sort方法进行数组排序的相关操作技巧,需要的朋友可以参考下
收藏 0 赞 0 分享
查看更多