图片上传（调用微信接口）

图片上传之原生方法

图片上传、压缩、回显、缩略图放大、删除、下载，可以参考这儿（h5方法）
https://github.com/zhangstar1331/pictureUpload
效果展示

背景

图片上传，我们一般用下面的H5方法，但是在安卓手机上无法一次性上传多张图片。为了能满足情况，如果是微信公众号项目，可以调用微信上传接口来实现。

<input class="hidden-input"  type="file" accept="image/*" style="height: 71px;opacity: 0;" multiple/>

图片上传之调用微信接口

1、h5页面引入微信js

<script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js" type="text/javascript"></script>

2、调用后台接口，进行微信初始化配置

$.ajax({url : "/cic-crm-web/cic/getConfig.do",async : true,type : "POST",headers: {"token":token},data : {"url" : encodeURIComponent(location.href.split('#')[0])},dataType : "json",success : function(data) {if (data != null) {conf = {'timestamp':data.timestamp, 'nonceStr':data.nonceStr, 'signature':data.signature};wx.config({debug : false,appId : "",timestamp : data.timestamp, //时间戳nonceStr : data.nonceStr, //随机字符串signature : data.signature, //得到的签名jsApiList: ['onMenuShareAppMessage', 'onMenuShareTimeline','chooseImage','previewImage','uploadImage','downloadImage'] // 功能列表，我们要使用JS-SDK的什么功能});}}})

3、调取摄像头和相册获取图片

 $('#idPartView .hidden-input').on('click', wxLoadImage.getImage);var num = 0;//调用微信api获取照片var wxLoadImage = {picId:null,//获取签名信息init:function(){},//调取摄像头和相册获取图片getImage:function(){//配置一次最多上传几张图片var count = 9;wxLoadImage.picId = $(this).parent();if (wxLoadImage.picId.parent().hasClass('onePicLimit')) {count = 2;}wx.ready(function () {//调取摄像头和相册var localIds = [];var leng = 0;wx.chooseImage({count: count, // 默认9sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有success: function (res) {localIds = localIds.concat(res.localIds); // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片leng = localIds.length;if(window.__wxjs_is_wkwebview){//判断ios是不是用的 wkwebview 内核 for(var i = 0; i < leng; i++ ){num++;wxLoadImage._getIosImage(localIds[i],num)}}else{for(var i = 0; i < leng; i++ ){num++;//安卓这块拿到的是地址，不是base64等具体图片数据wxLoadImage._showImage(localIds[i],num)}}}});})},//IOS处理_getIosImage:function(e,num){var iosLocalId = [];wx.getLocalImgData({localId: e, // 图片的localIDsuccess: function (res) {                    var localData = res.localData; // localData是图片的base64数据，可以用img标签显示localData = localData.replace('jgp', 'jpeg');//iOS 系统里面得到的数据，类型为 image/jgp,因此需要替换一下 iosLocalId.push(localData);for(var i = 0; i < iosLocalId.length; i++){wxLoadImage._showImage(iosLocalId[i],num)}      },fail:function(res){alert("显示失败");}});},//展示图片_showImage:function(data,num){var html = '<span class="addPhoto" id="addPhoto_' + num + '" style="height: 71px;"><i class="select-no deletePhoto" id="deletePhoto_' + num + '"></i><img class="smallImage" id="smallImage_'+ num + '" alt="" src="" uri="" index=' + num + ' width="100%" height="100%"/></span>';wxLoadImage.picId.before(html);var parentDiv = wxLoadImage.picId.parent();var smallImage = parentDiv.find('.smallImage');var smallImageLen = smallImage.length;if (wxLoadImage.picId.parent().hasClass('onePicLimit')) {if(smallImageLen>=2){parentDiv.find('.onePhoto').hide();}}else if (wxLoadImage.picId.parent().hasClass('validateInfo')) {if(smallImageLen>=10){parentDiv.find('.onePhoto').hide();}}else if(wxLoadImage.picId.parent().hasClass('noPicLimit1')){if(smallImageLen>=14){parentDiv.find('.onePhoto').hide();}}console.log(data)$('#smallImage_' + num).attr('src',data)console.log($('#smallImage_' + num).attr('src'))wxLoadImage._deletePhoto(num)wxLoadImage._onLoadPhoto("#addPhoto_" + num, data);setTimeout(function() {myScroll2.refresh();}, 300);},//上传图片，因为安卓src那块塞得是地址，不是具体的图片数据，所以不能直接调用别的接口上传图片数据流。这块可以将获取到的微信数据上传到服务器，然后让后端再去服务器上下载下来，存到本地服务器_syncUpload:function(localIds){var localId = localIds.pop();wx.uploadImage({localId: localId,//需要上传的本地IDisShowProgressTips:0,success: function (res) {var serverId = res.serverId; // 返回图片的服务器端IDserverids.push(serverId);//其他对serverId做处理的代码if(localIds.length > 0){syncUpload(localIds);}if(leng==serverids.length){var json = {};for(var i=0;i<serverids.length;i++){json[i]=serverids[i];}var serids=JSON.stringify(json);}}});},//删除图片_deletePhoto: function(num) {$('#deletePhoto_' + num).on("click", function(e) {$('#addPhoto_' + num).parent().find('.onePhoto').show();$('#addPhoto_' + num).remove();e.stopPropagation();});},//点击图片时加载大图_onLoadPhoto: function(iconPicture, imgUrl) {$(iconPicture).on('click', function() {try {var img = new Image();img.src = imgUrl;var width;var height;if (img.complete) {width = img.width;height = img.height;} else {img.onload = function() {width = img.width;height = img.height;};}var top = 0;var left = 0;var windowWidth = $(window).width();var windowHeight = $(window).height();if (width > windowWidth) {var proportion = windowWidth / width;width = windowWidth;height = height * proportion;} else if (width < windowWidth) {left = (windowWidth - width) / 2;}if (height < windowHeight) {top = (windowHeight - height) / 2;}var html = '';html += '<div class="jumpbox2 displayN preImg panel" id="preImg" style="top:0;background:#000;width:100%;height:100%">';html += '<div style="position:absolute; z-index:999;top:' + top + 'px;left:' + left + 'px;overflow:hidden;">';html += '<img id="preImage" style="vertical-align: middle;margin:0 auto;" alt="" src="' + imgUrl + '" width="' + width + '" height="' + height + '">';html += '</div></div>';$('body').append(html);$('#preImg').bind('click', function() {$('#preImg').hide();$('#preImg').unbind('click');$('#preImg').remove();});setTimeout(function() {$('#preImg').show();}, 200);} catch (e) {alert(e.name + '  ' + e.message);}});}}

图片上传（调用微信接口）相关推荐

微信图片消息服务器故障,解决图片上传到微信服务器后无法显示问题
标签:attr ict viewport 使用完全 example cache ber copy vue项目里可以添加到app.vue 关于referrer 在页面引 ...
php 接收 oc 图片上传,php yii2接口中图片上传
现在在给ios给接口,遇到了一些图片上传的问题,现在可以接收到ios传来的base64编码后的数据.我是否需要解码?解码又需要怎么处理才能把图片上传到服务器,并从服务器获取URL来存入到数据库呢?求大 ...
java公众号图片上传_java微信公众号上传下载图片，springmvc demo
[实例简介] 微信上传下项目使用说明: 1.本项目适合学习springmvc学者(springmvc demo), url(http://localhost:8082/com.demo.weixin/ ...
java 微信图片上传_微信小程序图片上传java端以及前端实现
小程序的图片上传与传统的图片上传方式有一些不一样如果你有幸看到这篇文章,恭喜你,你可以完美解决了. 话不多说,前后端代码一并奉上: (基于springmvc ) @Controller @Reque ...
微信支付图片上传java_微信开发-----微信公众号调用微信上传图片接口
$(function () { var url = location.href.split('#')[0]; var date = "url=" + url; //get中url指 ...
1688以图搜货接口，1688图片搜索接口，拍立淘接口，以图搜商品接口，图片上传搜索商品接口，按图搜索接口代码对接参数说明
一.接口说明: 有两种方式可以通过图片url地址请求获取到图片上的相似商品列表,然后再次拿到商品详情. 点击获取key和secret 方式一:可以用淘宝/1688平台外的图片进行先上传然后再搜索商品的 ...
uni-app开发中，使用ThorUI中的图片上传，自定义接口返回数据修改
Thor官方文档提示: 源码内容:(源码内默认对接口返回数据的处理,具体在uploadImage方法内) //判断code,以实际接口规范判断if (d.code % 100 === 0) {// 上 ...
微信jssdk 图片上传 JAVA_微信jssdk图片上传
classJSSDK {private $appId;private $appSecret;public function __construct($appId, $appSecret) {$this ...
PHP开发微信支付小微商户V3版本图片上传、生成签名、平台证书获取、平台证书编号、敏感信息加密
吐槽一下,看微信支付小微商户的开发文档头都大了,什么是平台证书.什么是商户API证书...... 好了废话不多说下面明确几个名词: 商户API证书:是由权威CA颁发,用于有关微信支付等操作API接口使 ...
微信开发h5图片上传（拍照、图片压缩、IOS照片旋转)
微信开发h5图片上传开发环境 vue.js,原生h5 input file, 微信公众号网页依赖安装 exif-js:IOS下拍照照片的方向有问题, 需要exif-js来读取照片信息进行旋转处理: ...

图片上传（调用微信接口）

图片上传之原生方法

背景

图片上传之调用微信接口

图片上传（调用微信接口）相关推荐

最新文章

热门文章