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

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

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

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

<script src="https://zhanzhang360.qulang.net/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这个数组正确即可。

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

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

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

AngularJs IE Compatibility 兼容老版本IE

本文主要介绍AngularJs IE Compatibility 兼容老版本IE的问题及解决办法,有兴趣的小伙伴可以参考下
收藏 0 赞 0 分享

AngularJs Modules详解及示例代码

本文主要介绍AngularJs Modules的相关知识,这里整理了详细的资料及简单示例代码,有兴趣的朋友可以参考下
收藏 0 赞 0 分享

AngularJs Scope详解及示例代码

本文主要介绍AngularJs Scope的知识,这里整理了详细资料及示例代码,有兴趣的小伙伴可以参考下
收藏 0 赞 0 分享

node.js中module.exports与exports用法上的区别

Node.js 引入了模块(Module)概念,一个模块可以通过module.exports 或 exports 将函数、变量等导出,以使其它 JavaScript 脚本通过require() 函数引入并使用。那么node.js中module.exports与exports有什么
收藏 0 赞 0 分享

基于JS实现发送短信验证码后的倒计时功能(无视页面刷新,页面关闭不进行倒计时功能)

这篇文章主要介绍了基于JS实现发送短信验证码后的倒计时功能(无视页面刷新,页面关闭不进行倒计时功能)的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下
收藏 0 赞 0 分享

基于jQuery实现发送短信验证码后的倒计时功能(无视页面关闭)

最近做了一个项目,其中有需求要求实现发送短信验证码后倒计时功能,其中有个难点:要求关闭页面也进行倒计时。好吧,下面小编把jquery 发送验证码倒计时的实现代码分享给大家,大家可以参考下
收藏 0 赞 0 分享

js绘制购物车抛物线动画

这篇文章主要为大家详细介绍了js绘制购物车抛物线动画,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
收藏 0 赞 0 分享

vue.js入门教程之绑定class和style样式

小编之前介绍了通过vue.js计算属性,不知道大家都学会了吗。那这篇文章中我们将一起学习vue.js实现绑定class和style样式,有需要的朋友们可以参考借鉴。
收藏 0 赞 0 分享

纯JS实现可拖拽表单的简单实例

下面小编就为大家带来一篇纯JS实现可拖拽表单的简单实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

js实现StringBuffer的简单实例

下面小编就为大家带来一篇js实现StringBuffer的简单实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享
查看更多