总体思路是:在微信下选好图片后将图片上传到微信服务器,在后端使用微信服务器返回的图片 serverId 加上调用接口的 ApiTicket 通过七牛的 fetch 接口向微信服务器下载多媒体文件的接口请求图片的二进制流,然后保存至自己七牛账号内的特定 bucket。
大致过程如下:

1.调用微信 chooseImage 接口,成功后调用 uploadImage 接口

wx.chooseImage({
count: 1,
sizeType: ['original', 'compressed'],
sourceType: ['album', 'camera'],
success: function(res) {
$scope.localIds = res.localIds; //存储localId供本地预览
wx.uploadImage({
localId: res.localIds[0],
isShowProgressTips: 1,
success: function(res) {
WishData.mediaId = res.serverId; //图片上传成功后保存serverId然后发给后台,让后台根据serverId去微信服务器下载对应的图片
}
});
}
});

2.在后台使用七牛的 fetch 接口向微信服务器请求文件并存入自己的七牛仓库

var client = new qiniu.rs.Client();
var random_key = Math.random().toString(36).substr(2, 15); //生成一个随机字符串来给图片命名
//调用七牛 fetch 接口,具体用法参照文档
client.fetch('http://file.api.weixin.qq.com/cgi-bin/media/get?access_token=' + req.session.apptoken + '&media_id=' + req.body.mediaId, 'gdutgirl', random_key, function(err, ret) {
if (err) {
console.log(err.error);
next();
} else {
console.log('图片请求成功');
var url = qiniu.rs.makeBaseUrl('7xnxuw.com1.z0.glb.clouddn.com', random_key); //生成图片的可访问url
req.body.imgurl = url;
next();
} });

其中需要特别注意的地方是,通过微信返回的 serverId 去微信服务器下载图片的接口微信公众号微信企业号是不一样的(微信企业号开发文档没有提供媒体下载接口以为是同公众号下载接口一样,结果总是提示 aceess_token

使用微信 SDK 上传图片到七牛的更多相关文章

  1. axios上传图片(及vue上传图片到七牛))

    浏览器上传图片到服务端,我用过两种方法: 1.本地图片转换成base64,然后通过普通的post请求发送到服务端. 操作简单,适合小图,以及如果想兼容低版本的ie没办法用此方法 2.通过form表单提 ...

  2. node+express上传图片到七牛

    本人微信公众号:前端修炼之路,欢迎关注 最近做项目的时候有一个上传图片的需求,由于没有后端的配合,所以决定自己来搭个服务器,实现上传图片功能.以后如果需要修改成java或者php为后端,直接使用即可, ...

  3. UEditor上传图片到七牛C#(后端实现)

    由于个人网站空间存储有所以选择将图片统一存储到七牛上,理由很简单 1  免费10G 的容量  ,对个人网站足够用 2  规范的开发者文档 和完善的sdk(几乎所有热门语言sdk) 整体思路 图片上传七 ...

  4. koa-ueditor上传图片到七牛

    问题描述:服务器系统架构采用的是koa(并非koa2),客户端富文本编辑器采用的是百度的ueditor控件.现在需要ueditor支持将图片直接上传到七牛云. 前提:百度的ueditor需要在本地配置 ...

  5. JAVA简单上传图片至七牛

    utils package com.example.demo.utils; import com.alibaba.fastjson.JSONObject; import com.qiniu.commo ...

  6. 微信sdk上传图片大小1k,损坏的问题以及微信上传图片需要的配置

    微信公众号的appid和appsecret有问题,会导致上传图片大小为1k这个问题 微信上传图片需要设置公众号的'JS接口安全域名'

  7. vue项目中使用element ui上传图片到七牛

    1.获取token值 后台有接口调用直接返回token值 //请求后台拿七牛云token async getQiniuToken() { //token let uploadtoken = await ...

  8. UEditor上传图片到七牛云储存(java)

    我们的网站一般放在虚拟空间或者服务器上,图片如果存在本地目录,会占用很多空间和流量,还增加了负担,好的办法是把图片存放到云储存服务里面,平时用url去拿 云储存:普遍说又拍云和七牛比较好,看到七牛免费 ...

  9. UEditor上传图片到七牛云储存(c#)

    我们的网站一般放在虚拟空间或者服务器上,图片如果存在本地目录,会占用很多空间和流量,还增加了负担,好的办法是把图片存放到云储存服务里面,平时用url去拿 云储存:普遍说又拍云和七牛比较好,看到七牛免费 ...

随机推荐

  1. Sqlserver系列(二) 模糊查询 like

    通配符 % 匹配零个或多个字符 _ 匹配单个字符 []  指定范围 ([a-f]) 或集合 ([abcdef]) 中的任何单个字符. [^] 不属于指定范围 ([a-f]) 或集合 ([abcdef] ...

  2. mac版gif格式录屏工具下载和使用

    下载链接: http://pan.baidu.com/s/1geeRmtd 密码: rstv ps:如果失效可以联系发邮件至chenruichn@163.com联系我 [以下教程为转载]本帖最后由 S ...

  3. 转:C#整数三种强制类型转换int、Convert.ToInt32()、int.Parse()的区别

    1.int适合简单数据类型之间的转换,C#的默认整型是int32(不支持bool型); 2.int.Parse(string sParameter)是个构造函数,参数类型只支持string类型; 3. ...

  4. 【Remoting-5代码实现】

    服务端 class RemotingServiceHelper { private static string m_protocolType; private static string urlStr ...

  5. MFC CSplitterWnd的用法

    用MFC开发一个软件界面中需要拆分多个试图窗口时,使用CSplitterWnd类  CSplitterWnd类主要用在创建一个拆分试图窗口.通常嵌入在框架窗口中(CMainFrame) 创建步骤: 1 ...

  6. 理解javascript 回调函数

    ##回调函数定义 百度百科:回调函数 回调函数就是一个通过函数指针调用的函数.如果你把函数的指针(地址)作为参数传递给另一个函数,当这个指针被用为调用它所指向的函数时,我们就说这是回调函数.回调函数不 ...

  7. Dom4j使用Xpath语法读取xml节点

    我们可以使用Xpath的语法来轻易的读取xml的某个节点[类似于jQuery的选择器]: 使用Xpath语法需要添加新的jaxen-1.1-beta-7.rar 这个jar包 dom4j完整jar包我 ...

  8. spring postconstruct

    package com.jdw.service.impl; import java.util.List; import javax.annotation.PostConstruct; import o ...

  9. xml文件的解析

    1. xml文件的解析 void CDataMgr::readStringData() { std::string xml_name = "config/string.xml"; ...

  10. groovy 弹出菜单

    import groovy.swing.* import javax.swing.* import java.awt.* def swing = new SwingBuilder() swing.fr ...