首页 > js教程 > 正文

JS开发微信公众号上传图片到本地服务器

原创 2018-03-14 18:41:44 0 28
微信公众号开发中一般会涉及到在手机公众号程序中选择本地图片或者拍照,将图片上传到本地后台服务器的功能,网上的做法一般是调用微信官方提供的chooseImage方法,再判断是android还是ios并且是否使用WKWebview内核,最后再分别处理返回值将之转为base64编码的数据,再上传到服务器上。

这种办法的难点在于需要判断系统,并且对微信返回的数据进行base64编码,然后在服务器端还得写base64解码的逻辑,本文不使用通用的做法,而是采用先上传到微信服务器,再到后台服务器端从微信服务器下载回来保存到文件服务器。具体代码如下:

1、页面

<input type="button" id="uploadBtn">

页面上只有一个普通的button的上传按钮

2、js逻辑

$('#uploadBtn').click(function () {
	wx.chooseImage({
		count: 1,
		sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有
		sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有
		success: function (res) {
			var localIds = res.localIds; // 返回选定照片的本地ID列表,localId可以作为img标签的src属性显示图片
			that.uploadImg(localIds[0]);
		}
	});
});

//具体上传图片
uploadImg: function (e) {
	wx.uploadImage({
		localId: e, // 需要上传的图片的本地ID,由chooseImage接口获得
		isShowProgressTips: 1, // 默认为1,显示进度提示
		success: function (res) {
			serverId = res.serverId;
			$.ajax({
				url: "/uploadImg",
				dataType: "json",
				async: false,
				contentType: "application/x-www-form-urlencoded; charset=UTF-8",
				data: {"mediaId": serverId},
				type: "POST",
				timeout: 30000,
				success: function (data, textStatus) {
					$('#imgUrl').val(data);
					$.toast('上传成功', 'text');
				},
				error: function (XMLHttpRequest, textStatus, errorThrown) {
					$.toast('上传错误,请稍候重试!', 'text');
				}
			});
		},
		fail: function (error) {
			$.toast('上传错误,请稍候重试!', 'text');
		}
	});
}

先调用wx.chooseImage方法来选择图片,然后将结果再调用上传图片的方法wx.uploadImage,拿到上传成功的返回值就是mediaId,再调用我们自己写的服务器端的controller方法将mediaId通过ajax提交过去,接下来就是服务器端的代码。

3、服务器端处理逻辑

/**
     * 获取临时素材
     *
     * @param mediaId 媒体文件ID
     * @return 正确返回附件对象,否则返回null
     * @throws WeixinException
     */
    public Attachment downloadMedia(String mediaId) throws WeixinException {
        //下载资源
        String url = "https://api.weixin.qq.com/cgi-bin/media/get?access_token=" + this.oauthToken.getAccess_token() + "&media_id=" + mediaId;
        //创建请求对象
        HttpsClient http = new HttpsClient();
        return http.downloadHttps(url);
    }
    
其中Attachment表示下载文件返回值对象,包含的属性有:
public class Attachment {

    private String fileName;
    private String fullName;
    private String suffix;
    private String contentLength;
    private String contentType;
    private BufferedInputStream fileStream;
    private String error;
    
    省略get/set方法
}

调用downloadMedia方法之后获取Attachment对象,主要就是对BufferedInputStream对象的fileStream来进行处理,这个属性就是图片文件流,保存文件流到本地就有很多的方法,可以使用apache提供的FileUtils类来处理,这里就不提供具体的代码了,网上很多类似的。至此我们就已经成功的实现在微信公众号上上传图片到本地服务器了。

相关推荐:

php下载图片到本地服务器实例分享

使用PHP从微信服务器上下载文件到本地服务器

php将远程图片保存到本地服务器的实现代码,_PHP教程

以上就是JS开发微信公众号上传图片到本地服务器的详细内容,更多请关注php中文网其它相关文章!

  • 相关标签:javascript 本地 图片
  • 本文原创发布php中文网 ,转载请注明出处,感谢您的尊重!
  • 相关文章


  • 原生javascript实现分享到朋友圈功能 支持ios和android_javascript技巧
  • jQuery链式调用与show知识浅析_jquery
  • JS实现登录页面记住密码和enter键登录方法推荐_javascript技巧
  • BootstrapTable与KnockoutJS相结合实现增删改查功能【一】_javascript技巧
  • 网友评论

    文明上网理性发言,请遵守 新闻评论服务协议

    我要评论
    独孤九贱(4)_PHP视频教程

    独孤九贱(4)_PHP视频教程

    江湖传言:PHP是世界上最好的编程语言。真的是这样吗?这个梗究竟是从哪来的?学会本课程,你就会明白了。 PHP中文网出品的PHP入门系统教学视频,完全从初学者的角度出发,绝不玩虚的,一切以实用、有用...

    独孤九贱(5)_ThinkPHP5视频教程

    独孤九贱(5)_ThinkPHP5视频教程

    ThinkPHP是国内最流行的中文PHP开发框架,也是您Web项目的最佳选择。《php.cn独孤九贱(5)-ThinkPHP5视频教程》课程以ThinkPHP5最新版本为例,从最基本的框架常识开始,将...

    独孤九贱(1)_HTML5视频教程

    独孤九贱(1)_HTML5视频教程

    《php.cn原创html5视频教程》课程特色:php中文网原创幽默段子系列课程,以恶搞,段子为主题风格的php视频教程!轻松的教学风格,简短的教学模式,让同学们在不知不觉中,学会了HTML知识。 ...

    ThinkPHP5实战之[教学管理系统]

    ThinkPHP5实战之[教学管理系统]

    本套教程,以一个真实的学校教学管理系统为案例,手把手教会您如何在一张白纸上,从零开始,一步一步的用ThinkPHP5框架快速开发出一个商业项目。

    PHP入门视频教程之一周学会PHP

    PHP入门视频教程之一周学会PHP

    所有计算机语言的学习都要从基础开始,《PHP入门视频教程之一周学会PHP》不仅是PHP的基础部分更主要的是PHP语言的核心技术,是学习PHP必须掌握的内容,任何PHP项目的实现都离不开这部分的内容,通...

    相关视频教程

  • javascript初级视频教程 javascript初级视频教程
  • jquery 基础视频教程 jquery 基础视频教程
  • javascript三级联动视频教程 javascript三级联动视频教程
  • 独孤九贱(3)_JavaScript视频教程 独孤九贱(3)_JavaScript视频教程
  • 独孤九贱(6)_jQuery视频教程 独孤九贱(6)_jQuery视频教程
  • 相关视频章节