使用微信 SDK 上传图片到七牛

总体思路是:在微信下选好图片后将图片上传到微信服务器,在后端使用微信服务器返回的图片 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

时间: 2024-10-24 15:39:55

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

关于小程序上传图片到七牛的总结

最近在小程序中做到了头像上传这个功能,本来是挺简单的一个功能,但是这次是让我直接将图片上传到云储存,把返回的路径直接传给后台数据库存起来 emm这就很蛋疼了,一直都是处于你给我接口,我照着要求填数据就行了的那种模式,突然来一个这个操作 而且七牛的官方文档也有点难以理解,反正我是看了一下午,没看懂一堆参数,或者是初始化是怎么配置的 坑是踩的有点多吧,差点心态爆炸了,最后还是依靠的万能的百度解决的 记录一下,算是个总结吧 步骤: 1.  token还是必须要的,调取后台接口,获取到上传图片到七牛的许

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

由于个人网站空间存储有所以选择将图片统一存储到七牛上,理由很简单 1  免费10G 的容量  ,对个人网站足够用 2  规范的开发者文档 和完善的sdk(几乎所有热门语言sdk) 整体思路 图片上传七牛云 在我看来无非两种方式 1 前端表单或ajax异步提交请求到七牛服务器 ,当然此时也需要经过后端获取相应的  token (图片->七牛服务器) 2 直接后端代码请求 七牛服务器 ,官方有各版本语言的sdk 提供 ,可提高开发效率 ,降低开发难度  (图片->自己服务器->七牛服务器)

onethink 后台编辑器 上传图片使用七牛驱动云存储

首先感谢这篇文章作者: http://blog.csdn.net/weishiyong/article/details/40060551 写的不是很详细,而且没有颜色标示.和我当前使用的OT1.0版本代码又不一样.所以参考参考思路还是可以的. 经过2小时的调试和修改已经成功实现. 下面把过程记录下来. 首先修改全局Config文件:  'PICTURE_UPLOAD_DRIVER'=>'QINIU', //把原来的LOCAL改成七牛 修改七牛配置文件  'UPLOAD_QINIU_CONFIG'

小程序上传图片到七牛

小程序上传图片非常简单,利用好2个API: wx.chooseImage wx.uploadFile /** * 上传图片 */ chooseImageUpload() { var that = this; wx.chooseImage({ count: 1, sizeType: ['original', 'compressed'], sourceType: ['album', 'camera'], success: function (res) { that.tempFilePaths = r

koa-ueditor上传图片到七牛

问题描述:服务器系统架构采用的是koa(并非koa2),客户端富文本编辑器采用的是百度的ueditor控件.现在需要ueditor支持将图片直接上传到七牛云. 前提:百度的ueditor需要在本地配置为可用,图片上传相关的配置可以参考官方文档的描述.由于服务器用的node.js,因此ueditor目录下我们只需要保留nodejs目录,其它部分如php,asp.net等都可以删掉.然后根据自己服务器的环境适当修改config.json文件中的配置. 现有方案:现有npm和github上找到的库有很

UEditor+七牛,实现图片直连上传

最近做的项目,涉及到使用富文本编辑器,我选择了百度的UEditor.同时,我们的图片放在七牛云存储上.关于这两者间的集成,我写下一些个人的经验,与大家分享. 图片上传方案 目前来说,Web端基于七牛等云存储的图片上传方式分为以下两种: 1. 上传图片至服务端,再将数据转发至七牛. 通过服务端接受用户上传的内容,同时可以对内容进行有效性审核,拒绝不合规范的内容,然后从服务端将内容上传至七牛. 这种方法可以有效控制并记录用户提交的内容,但同时也增加了服务器的运行压力. 2. 直接上传图片至七牛,然后

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

我们的网站一般放在虚拟空间或者服务器上,图片如果存在本地目录,会占用很多空间和流量,还增加了负担,好的办法是把图片存放到云储存服务里面,平时用url去拿 云储存:普遍说又拍云和七牛比较好,看到七牛免费额度很大,网上评价也挺好的,我就选了七牛 编辑器:我用的是百度的UEditor编辑器,之后需要修改一些的开放的类和js文件 下面写一下c#版本的修改方法(java版本在下一篇) 一.集成UEditor 1.在项目中加入UEditor 在UEditor的下载页,可以下载到最新的1.4.3.3 .Net

简单对七牛.Net API管理文件进行简单封装的类

//封装类代码 using System; using System.Collections.Generic; using System.Linq; using System.Text; using Qiniu.Conf; using Qiniu.RS; using Qiniu.RPC; using Qiniu.RSF; using Qiniu.IO; using Qiniu.IO.Resumable; using System.IO; using System.Web; using Syste

用七牛sdk传递图片到七牛服务器

第一步申请七牛的开发者账号,申请完了之后,可以获取accesskey和secrect key 参照官方网站的java的demo 下载了依赖的jar包,放到/Library/Java/Extentiosns目录下 将对应的accesskey  secretkey填入 即可上传图片 import com.qiniu.util.Auth; import java.io.IOException; import com.qiniu.common.QiniuException; import com.qin