精华内容
下载资源
问答
  • 1、微信公众号上传照片方法 wxPic.js // 弹出提示消息的组件 import { Toast } from "vant"; // 微信JS-SDK文件,微信开发者官方有 import "./wx.js"; import axios from 'axios'; // 选照、拍照权限 export ...
    1、微信公众号上传照片方法 wxPic.js
    // 弹出提示消息的组件
    import { Toast } from "vant";
    // 微信JS-SDK文件,微信开发者官方有
    import "./wx.js";
    import axios from 'axios';
    // 选照、拍照权限
    export function WXJSSDKValidate(PicArray, picIds, paramsObj, n) {
        paramsObj.count++;
        wx.chooseImage({
            count: n, // 默认9
            sizeType: ["compressed"], // 可以指定是原图还是压缩图,默认二者都有
            sourceType: ["album", "camera"], // 可以指定来源是相册还是相机,默认二者都有
            success: function (response) {
                if (PicArray.length + response.localIds.length > n) {
                    Toast('图片数量不能大于 ' + n + ' 张')
                    return
                }
                // 选择照片和拍照确定时在此处
                GetWeiXinImages(response, PicArray, picIds, paramsObj);
            }
        });
    }
    // 获取照片
    async function GetWeiXinImages(resData, PicArray, picIds, paramsObj) {
        let localIds = resData.localIds;
        var uploadCount = 0;
        var localIdLength = localIds.length;
        var uploadImg = (paramsObj, PicArray, picIds) => {
            PicArray.push({ PID: localIds[uploadCount], Value: localIds[uploadCount] });
            //上传微信服务器
            wx.uploadImage({
                localId: localIds[uploadCount], // 需要上传的图片的本地ID,由chooseImage接口获得
                isShowProgressTips: 1, // 默认为1,显示进度提示
                success: function (res) {
                    //添加资源ID到 集合
                    uploadCount++;
                    paramsObj.weixinId.push(res.serverId)
                    if (uploadCount < localIdLength) {
                        uploadImg(paramsObj, PicArray, picIds);
                    }
                    //上传自己服务器
                    axios.get(`自己服务器上传接口路径` + res.serverId)
                        .then(response => {
                            if (response.data.code == 0) {
                                let data = response.data.data;
                                picIds.push(data)
                                if (picIds.length == paramsObj.weixinId.length) {
                                    paramsObj.tempArray = [];
                                    return PicArray, picIds
                                }
                            }
                        })
                        .catch(err => {
                            // reject(err)
                        })
                }
            });
        }
        uploadImg(paramsObj, PicArray, picIds);
    }
    
    
    2、调用文件test.js:
    <template>
    	<div>
    		<van-field
    			readonly
    			label="照片:"
    			@click-icon="SelectPhoto"
    			icon="photograph"
    			@click="SelectPhoto"
    		/>
    		<div class="imgBox">
    			<span
    				class="spanBox"
    				v-for="(item, index) in PhotoArray"
    				:key="index"
    			>
    				<img :src="item.Value" />
    				<van-icon
    					name="close"
    					@click="CloseSelectImg(
    							index,
    							PhotoArray,
    							PhotoImgIds
    					)"/>
    			</span>
    		</div>
    	</div>
    </template>
    <script>
    import './wx.js'
    import Url from '../../utils/url'
    import { WXJSSDKValidate } from './wxPic'
    export default {
    	data() {
    		return {
    			PhotoArray: [],//页面显示集合
    			PhotoImgIds: [],//上传后返回路径集合
    			paramsObj:{
    				count:0,
    				tempArray:[],
    				weixinId:[],
    				tempIndex:0
    			}
    		}
    	},
    	// 获取微信相关
    	beforeMount() {
    		this.$get(
    			Url.wechat_v1_jssdk_validate +
    				`?url=${encodeURIComponent(window.location.href)}`
    		).then((res) => {
    			if (res.code == 0) {
    				wx.config({
    					debug: false, 
    					// 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,
    					//可以在pc端打开,参数信息会通过log打出,仅在pc端时才会制作。
    					appId: res.data.appId, // 必填,公众号的唯一标识
    					timestamp: res.data.timestamp, // 必填,生成签名的时间戳
    					nonceStr: res.data.nonceStr, // 必填,生成签名的随机串
    					signature: res.data.signature, // 必填,签名,见附录
    					jsApiList: ['chooseImage', 'uploadImage'],
    					// 必填,需要使用的JS接口列表,所有JS接口列表见附录2
    				})
    			} else if (res.code == -1) {
    				console.log(res)
    			}
    		})
    	},
    	methods: {
    		// 选拍照片
    		SelectPhoto() {
    			if (this.PhotoArray.length == 3) {
    				Toast('只能选择3张图片')
    				return
    			}
    			WXJSSDKValidate(
    				this.PhotoArray,
    				this.PhotoImgIds,//路径
    				this.paramsObj,
    				3
    			)
    		},
    		// 点击删除照片
    		CloseSelectImg(index, PhotoArray, ImgIDs) {
    			Dialog.confirm({
    				title: '',
    				message: '确认删除此照片?',
    			})
    				.then(() => {
    					PhotoArray.splice(index, 1)
    					PhotoImgIds.splice(index, 1)
    				})
    				.catch(() => {
    					// on cancel
    				})
    		},
    		Submit() {
    			console.log(PhotoImgIds);
    		},
    	}
    }
    </script>
    
    展开全文
  • 微信公众号上传图片接口

    千次阅读 2017-10-19 09:26:53
    微信公众号上传图片接口

    需要配置apppid等,先初始化。

    window.οnlοad=function(){ //用window的onload事件,窗体加载完毕的时候
    url=location.href.split('#')[0];
    var type = $('[name="LoanFormMap.evaluate_type"]').find("option:selected").text();

    if(type.indexOf('信用贷')!=-1){
    xyflag=true;
    $("#dkqx").html("贷款期限:");
    $('[name="LoanFormMap.loanterm"]').attr("placeholder","请输入贷款期限");


    $.ajax({
    type: "POST",
    url:"${pageContext.request.contextPath}/wechat/inquiry/getSignatureForWx.shtml", 
    dataType : "json",
    data:{
    appid:"${appid}",
    url:url
    },
    success: function(data) {
    var timestamp = data.timestamp;  
                    var noncestr = data.noncestr;  
                    var signature = data.signature;  
                     
    wx.config({
            debug: false, //开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
            appId: data.appid ,  // 必填,公众号的唯一标识
            timestamp: data.timestamp, // 必填,生成签名的时间戳
            nonceStr: data.nonceStr, // 必填,生成签名的随机串
            signature: data.signature,// 必填,签名,见附录1
          //  jsApiList: ['checkJsApi', 'chooseImage','getLocalImgData'] // 必填,需要使用的JS接口列表,所有JS接口列表见附录2
        jsApiList: ['chooseImage','uploadImage'] // 必填,需要使用的JS接口列表,所有JS接口列表见附录2
        });
    }
    }); 
     
    wx.ready(function(){  
          //...
    }); 
          
          wx.error(function(res){
    //...
        });
    }


    初始化过后,使用wx.chooseImage上传图片

    function imagefun(jid){
        wx.chooseImage({
            count: 1, // 默认9
            sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有
            sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有
            success: function (res) {
                var localIds = res.localIds; // 返回选定照片的本地ID列表,localId可以作为img标签的src属性显示图片
                $('#'+jid).attr('src', localIds);
             
            wx.uploadImage({
              localId: localIds.toString(), // 需要上传的图片的本地ID,由chooseImage接口获得 
            isShowProgressTips: 1, // 默认为1,显示进度提示
     
              success: function (res) {
                  var serverId = res.serverId; // 返回图片的服务器端ID
              var name=$("#"+jid).attr("name");
                  $("#"+jid).addClass("uploading");
                 
              $.ajax({
        type: "POST",
        url:"${pageContext.request.contextPath}/wechat/inquiry/uploadfile.shtml", 
        dataType : "json",
        data:{
        code:"${business_code}",
        type:name,
        subtype:name,
        mediaId:serverId,
        url:url,
        objid:$("#objid").val()
        },
      success: function(data) {
        $("#"+jid).removeClass("uploading");
        if(null==data){
      $("#"+jid).attr("src","");
      layer.alert('图片上传失败,请重新上传');
      }else{
      $("#"+jid).addClass("upload");
      }
        }
              });  
              }
          });    
            }
        });
         }



    <div style="margin-top: 15px;text-align: center;">
        <img class="objfile"  style="margin-left:1.5em;width:290px;height: 166px;" name="房地产证" filename="房地产证" 
        width="285px;" height="250px;" src="${pageContext.request.contextPath}/images/wechat/loan/ygd2_01.png" alt="" 
        id="objgtgy2" οnclick="imagefun('objgtgy2');"/>
        <div style="text-align:center">共同共有2</div> 
      </div>


    展开全文
  • 微信公众号上传图片

    千次阅读 2018-12-22 16:00:22
    最近要做一个上传行驶证给后台... 在这里还是记录一下微信公众号上传图片      首先又是坑的要死的签名,这里第一个前端配置就是: wx.config({ debug: false, // 因为在手机上测试没法打印,当debug为tr...

    最近要做一个上传行驶证给后台显示的功能     项目是微信公众号平台  当时第一想法是调微信上传图片接口   结果快做完了BOSS说让用组件做   。。。  在这里还是记录一下微信公众号上传图片

     

     

             首先又是坑的要死的签名,这里第一个前端配置就是:

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

     

    wx.config把微信公众号开发的一些参数配置在里面

    debug:解决手机上无法console测试数据  true为现实

    appid:后台传过来的appid

    timestamp:后台传过来的时间戳,必须一致

    nonceStr:同上  随机串

    signature:签名,拿到一串数据进行SHA1加密后的签名

    jsApiList:需要调用哪些接口  写在里面  ------ 我写的是选择图片和上传图片接口

     

        后台访问URL:

    https://api.weixin.qq.com/cgi-bin/token?
    grant_type=client_credential&appid="+PayConfigUtil.appid+"&secret="+PayConfigUtil.key;

    这是获取access_token的接口   get请求2个参数过去      分别是appid跟appsecret

    成功后会返回一个access_token给你

    然后需要拿着access_token去访问:

    https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token="+ acces +"&type=jsapi

    同样  ,  给上之前接口返回的access_token会返回一个jsapi_ticket给你  这个东西一天只能请求2000次的样子

    最后,把jsapi_ticket ,时间戳,随机串封装到一个String里

    String str = "jsapi_ticket="+tickets+"&noncestr="+noncestr+"&timestamp="+timestamp+"&url="+url2;  

    url是你当前操作的url全路径,url上的参数也有带进去#号后的就不用了

    用SHA1算法加密,这两步好坑- -   算法官方文档没有  网上也很多是很老的用不了  URL也是个坑 写错了一直调

    public class SHA1 {
    
    	 public static String getSignature(String string1) {
    		 String signature="";
    		 try
    	       {
    			 
    	           MessageDigest crypt = MessageDigest.getInstance("SHA-1");
    	           crypt.reset();
    	           crypt.update(string1.getBytes("UTF-8"));
    	           signature = byteToHex(crypt.digest());
    	       }
    	       catch (NoSuchAlgorithmException e)
    	       {
    	           e.printStackTrace();
    	       }
    	       catch (UnsupportedEncodingException e)
    	       {
    	           e.printStackTrace();
    	       }
    	       
    	        System.out.println("签名1:"+signature);
    	      // System.out.println("签名2:"+  SHA1Util.encode(string1) );
    	  return signature;
    	  
    	 }
    	
    	    
    	 
    	private static String byteToHex(final byte[] hash) {
    	    Formatter formatter = new Formatter();
    	    for (byte b : hash)
    	    {
    	        formatter.format("%02x", b);
    	    }
    	    String result = formatter.toString();
    	    formatter.close();
    	    return result;
    	}
    
    
        
        
    }  

     

     

    附上SHA1加密算法

     

    把时间戳、随机串、签名返回到前端,包括APPID。

    调起wx.chooseImage选择图片,可选择原图、压缩图,可选择相册、相机。

    wx.chooseImage({
    	    count: 1, // 默认9
    	    sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有
    	    sourceType: ['camera','album'], // 可以指定来源是相册还是相机,默认二者都有
    	    success: function (respos) {
    
    	    	localIds = respos.localIds
    	    	alert("JSON3"+localIds);
    	    	
    	    	wx.uploadImage({  
    		        localId: localIds.toString(), // 需要上传的图片的本地ID,由chooseImage接口获得  
    		        isShowProgressTips: 1, // 默认为1,显示进度提示  
    		        success: function (resp) {                                        
    		            mediaId = resp.serverId;     
    		            alert("resp:"+resp);
    		            
    		            alert("mediaId:"+mediaId);
    		            
    		            wx.getLocalImgData({
    				         localId: localIds.toString(), // 图片的localID
    				         success: function (respo) {     
    				              var localData = respo.localData; // localData是图片的base64数据,可以用img标签显示
    				              if (localData.indexOf('data:image') != 0) {
    		                        //判断是否有这样的头部
    		                        localData = 'data:image/jpeg;base64,' +  localData
    		                    }
    		                   		localData = localData.replace(/\r|\n/g, '').replace('data:image/jgp', 'data:image/jpeg')
    
    				             this.img_url = localData;
    				             alert(localData);
    				         },fail:function(respo){
    				         	
    				          alert("显示失败:"+JSON.stringify(respo));
    				         }
    				     });
    		            
    		        },fail: function (error) {  
    		            var picPath = '';  
    		            //localIds = '';  
    		            alert(JSON.stringify(error));          
    		        }          
    		    });  
    		}
    	});	

     

     

     

    好吧我直接粘过来了  - -

     

    wx.uploadImage是图片上传的接口   图片上传到微信的服务器  暂存3天,可再调用微信的下载图片接口进行下载

     

    差不多快做完的时候就被BOSS废掉了     然后就做原生的上传 。

    展开全文
  • 微信公众号图片旋转解决
  • 基于Vant 组件库+微信公众号开发文档 html部分 <div class="filelist"> <div class="boximg"> <div v-for="(item,index) in imgArr" :key="index" class="boximgInner"> <van-image width=...
    基于Vant 组件库+微信公众号开发文档

    html部分

    <div class="filelist">
         <div class="boximg">
           <div v-for="(item,index) in imgArr" :key="index" class="boximgInner">
             <van-image width="100" height="100" :src="item" />
             <van-icon class="delIco" name="close" @click="delImg(index)" />
           </div>
           <div class="uploader" @click="chooseImg" v-show="imgArr.length<9">
             <i class="van-icon van-icon-plus van-uploader__upload-icon">
               <!---->
             </i>
           </div>
         </div>
       </div>
    
    

    js部分

    import Vue from "vue";
    import { Toast,} from "vant";
    Vue.use(Toast);
    export default {
      data() {
        return {
          images: {
            localId: [],
            serverId: []
          },
          img_i: 0,
          uploadimg: false,
          imgArr: [],
          imgIdsArr: []
    	}
     },
     methods:{
     // 删除图片
      delImg(index) {
          this.imgArr.splice(index, 1);
          this.imgIdsArr.splice(index, 1);
        },
        // 获取微信的sdk
         signatureJSSDK() {
          //var url = "http://zhsqtest.xyre.com/WeChatPublic/index.html";//后台需要此页面的url来生成参数
          // var url = window.location.href.split('#')[0];//后台需要此页面的url来生成参数
          var url = encodeURIComponent(window.location.href.split("#")[0]); //后台需要此页面的url来生成参数
          this.$http
            .get("/wechat/image/sign?url=" + url, {})
            .then(res => {
              wx.config({
                debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
                appId: res.data.appId, // 必填,公众号的唯一标识
                timestamp: res.data.timestamp, // 必填,生成签名的时间戳
                nonceStr: res.data.noncestr, // 必填,生成签名的随机串
                signature: res.data.signature, // 必填,签名,见附录1
                jsApiList: [
                  // 必填,需要使用的JS接口列表,所有JS接口列表见附录2
                  "chooseImage",
                  "previewImage",
                  "uploadImage",
                  "downloadImage",
                  "translateVoice"
                ]
              });
              console.log("微信签名", wx.config);
            })
            .catch(e => {
              console.log("签名失败", e);
            });
        },
        chooseImg(e) {
          let that = this;
          wx.ready(() => {
            wx.chooseImage({
              count: 9 - this.imgArr.length, // 最多可以选择的图片张数,默认9
              sizeType: ["original", "compressed"], // original 原图,compressed 压缩图,默认二者都有
              sourceType: ["album", "camera"], // album 从相册选图,camera 使用相机,默认二者都有
              complete: function(res) {
                console.log("chooseImage", res);
                that.img_i = 0;
                if (res.errMsg == "chooseImage:ok") {
                  that.images.localId = res.localIds;
                  if (that.images.localId.length > 0) {
                    setTimeout(that.upload, 100);
                  }
                } else if (res.errMsg == "chooseImage:cancel") {
                } else {
                  Toast("获取图片失败,请重新选择");
                }
              }
            });
          });
        },
        upload() {
          let that = this;
          wx.uploadImage({
            localId: that.images.localId[that.img_i],
            complete: function(res) {
              that.img_i++;
              if (res.errMsg == "uploadImage:ok") {
                that.images.serverId.push(res.serverId);
                that.uploadimg = true;
                console.log("上传图片", res.serverId);
                that.$http
                  .post("/wechat/image/saveImageToWx?mediaId=" + res.serverId)
                  .then(res => {
                    var objd = res.data.obj;
                    var src = objd.filePath;
                    that.imgArr.push(objd.filePath);
                    var fileId = objd.fileId;
                    that.imgIdsArr.push(fileId);
                  })
                  .catch(e => {
                    console("e" + e);
                  });
              }
    
              if (that.img_i < that.images.localId.length) {
                setTimeout(that.upload, 100);
              }
            }
          });
        },
      },
      mounted(){
       this.signatureJSSDK(); // 获取签名
      }
    }
    
    展开全文
  • 处理思路: 从服务器获取微信配置...将base64图片转化为文件上传 关键代码: 1.获取配置与选择本地图片输出 importhttpfrom'./http' importapifrom'./api' importwxfrom"weixin-js-sdk"; exportdefau...
  • //根据微信JS接口上传图片,会返回上面写的images.serverId(即media_id),填在下面即可 $str = "http://file.api.weixin.qq.com/cgi-bin/media/get?access_token=".$access_token."&media_id=".$value; //获取...
  • 将base64图片转化为文件上传 关键代码: 1.获取配置与选择本地图片输出 import http from './http' import api from './api' import wx from "weixin-js-sdk"; export default { getConfig() { http .get...
  • 微信公众号上传图片那些问题

    千次阅读 2017-06-13 09:42:15
    1.需要下载上传到微信服务器的手机照片到自己的服务器,务必要进行认证,否则会报如下错误 可以在微信公众号提供的调试接口进行调试 ...
  • 微信公众号上传素材有很多分类,比如图片、视频等,也有永久素材和临时素材的分类,其实调用接口过程大同小异,方法是可以复用的,在这里不再多说,详细的分类描述可以参考微信开放平台的文档: ...
  • 在微信公众号后台上传图片,我们上传图片无法完美适配不同型号的手机,也无法完全规避微信压缩原则,不知道微信的压缩算法,我们怎样做才能最大程度有效保持图片质量?方法:能用 png 就用 png静图图片原始尺寸...
  • $.each(res.localIds,function (k,v) { wx.getLocalImgData({ localId: v, // 图片的localID success: function (res) { // console.log(res.localData) var src = res.localData if (src.indexOf('data:image') ==...
  • 基本的UI 因使用的是Muse-UI,对不同的画面适配并...然后添加一个隐藏的Input用于处理非微信(JS-SDK)下的图片上传。UI部分代码,其中Style 可以参考名字自己实现,主要就是修改 mu-grid-list的默认样式 <div&...
  • 我用C#开发微信公众号遇到了这样一个问题,在这个页面我需要上传一个图片到微信服务器里,并且返回图片的路径。 只要不能传上去并且返回路径 就可以了 不要说那些接口 我开发微信是半路出家 不怎么懂,还恳求各路...
  • i++){ // 上传照片 wx.uploadImage({ localId: localIds[i], isShowProgressTips: 0,// 默认为1,显示进度提示 success: function(res) { var serverId = res.serverId; $.ajax({ url:'/index/wx/getimg', data:{...
  • 同样调用微信小程序的上传图片接口,上传9张, 其他手机都显示9张,就华为note9手机显示不够9张, 返回值也看看了,其他手机传9张回显9张,就note9 传9张回显的不是9张同样的无线,同样的照片...
  • 4、上传至微信公众号图片素材。 这样可以做成总运营平台自定义关键词+图片 以一张图片举例; 以下为demo,该批量处理还是批量处理,该异步处理还是得异步处理 在项目启动的时候将图片地址等信息添加到本地...
  • PHP微信公众号上传拉取图片

    千次阅读 2018-10-10 09:40:34
    // 返回选定照片的本地ID列表,localId可以作为img标签的src属性显示图片 uploadImages(localIds) } }); }) //上传图片 function uploadImages(localIds) { var localId = localIds.pop(); wx.uploadImage...
  • 微信公众号上传

    2021-03-04 17:20:04
    微信公众号素材上传 微信文档其实给的很简单,但是有什么能难倒我们程序员呢,废话不多说,直接上代码 代码实现: 提示:有些变量没有定义很清楚,需要结合自己的实际项目填写数据哦 @Test public String ...
  • 微信公众号上传永久图片素材

    千次阅读 2019-02-14 17:09:06
    使用curl命令   curl "...amp;type=image" -F media=@icon.png -F description='{"title":"测试图片", "introduction"...测试上传永久图片素材"}' ..
  • 微信公众号图片上传

    2021-01-20 11:42:37
    微信公众号chooseImage图片选择后ios回显问题 需要调用getLocalImgData来获取图片的bas64进行回显,具体原因参考https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/iOS_WKWebview.html 注:仅在ios中...
  • 2、本项目适合学习微信开发 (微信接入,上传及下载临时素材文件,微信jssdk图片上传及下载) url(http://localhost:8082/com.demo.weixin/uploadImg.html)载图片,微信jssdk配置,上传及下载文件,springmvc ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 22,627
精华内容 9,050
关键字:

公众号上传图片