微信 开发 图片 上传 阿里云 oss 服务器

在做微信开发时,我需要将图片上传至阿里云OSS,思路是服务端下载微信图片再转存至OSS。

wx.chooseImage({count: 1, // 默认9sizeType: ['original', 'compressed'],sourceType: ['album', 'camera'],success: function (res) {var localIds = res.localIds;wx.uploadImage({localId: localIds[0], // 需要上传的图片的本地ID,由chooseImage接口获得isShowProgressTips: 1, // 默认为1,显示进度提示success: function (res) {var serverId = res.serverId; // 返回图片的服务器端ID// do something ...// 调用自己搭建的服务端的api,传入serverId,做获取微信图片上传OSS的相关操作doSomething();}});}
});

选择图片时只要选择了compressed,微信就会自动帮我们压缩图片,官方文档也说明上传的多媒体文件会控制格式和大小,其中图片控制在jpg格式和1M以下的大小。所以,基本不用考虑图片过大的问题。实测中,8M的图片压缩后只有120KB左右。

将图片先上传至微信的服务器(最多保存3天),再通过微信的下载多媒体文件接(http://file.api.weixin.qq.com…)将图片下载到服务器,再上传至OSS(虽然有点绕,但可行)。

主要有三种方法处理

1、利用fs将图片写到本地

const fs = require('fs');
const request = require('require');
const OSS = require('ali-oss').Wrapper;const ossClient = new OSS({accessKeyId: 'your access key',accessKeySecret: 'your access secret',bucket: 'your bucket name',region: 'oss-cn-hangzhou'
});// 需要获取微信accessToken,这里不细说
const accessToken = 'access token';
const mediaId = 'xxxxxxx'; // 微信多媒体文件id
const destPath = `weixin/images/201702/${mediaId}.jpg`; // OSS文件路径,按自己喜欢构造咯
const wxReq = request(`http://file.api.weixin.qq.com/cgi-bin/media/get?access_token=${accessToken }&media_id=${mediaId}`);// 将文件流pipe到本地文件
wxReq.pipe(fs.createWriteStream(`${mediaId}.jpg`));
wxReq.on('end', () => {co(function* () {const result = yield ossClient.putStream(destPath, fs.createReadStream(`${mediaId}.jpg`), {timeout: 30 * 60 * 1000});console.log('图片上传阿里云结果', result);fs.unlink(`${mediaId}.jpg`);// res.status(200).json(result);}).catch(err => {console.warn(err);//res.status(500).send('上传文件出错');});
});

这种方式需要频繁地写文件和删文件,很不友好。

2、利用memory-streams模块将图片写到内存

const request = require('require');
const OSS = require('ali-oss').Wrapper;
const streams = require('memory-streams');const ossClient = new OSS({accessKeyId: 'your access key',accessKeySecret: 'your access secret',bucket: 'your bucket name',region: 'oss-cn-hangzhou'
});const accessToken = 'access token';
const mediaId = 'xxxxxxx'; // 微信多媒体文件id
const destPath = `weixin/images/201702/${mediaId}.jpg`; // OSS文件路径
const writer = new streams.WritableStream();
const wxReq = request(`http://file.api.weixin.qq.com/cgi-bin/media/get?access_token=${accessToken }&media_id=${mediaId}`);wxReq.pipe(writer);
wxReq.on('end', () => {co(function* () {const result = yield ossClient.put(destPath, writer.toBuffer(), {timeout: 30 * 60 * 1000});console.log('图片上传阿里云结果', result);// res.status(200).json(result);}).catch(err => {console.warn(err);//res.status(500).send('上传文件出错');});
});

这种方式将图片暂存在内存里面,那如果并发量很大,服务器内存爆炸。

3、将下载图片的流直接写入OSS文件

const request = require('require');
const OSS = require('ali-oss').Wrapper;const ossClient = new OSS({accessKeyId: 'your access key',accessKeySecret: 'your access secret',bucket: 'your bucket name',region: 'oss-cn-hangzhou'
});const accessToken = 'access token';
const mediaId = 'xxxxxxx'; // 微信多媒体文件id
const destPath = `weixin/images/201702/${mediaId}.jpg`; // OSS文件路径
const wxReq = request(`http://file.api.weixin.qq.com/cgi-bin/media/get?access_token=${accessToken }&media_id=${mediaId}`);wxReq.on('response', (response) => {// request的响应结果response可以作为读取流传给ossClientco(function* () {const result = yield ossClient.putStream(destPath, response, {timeout: 30 * 60 * 1000});console.log('图片上传阿里云结果', result);// res.status(200).json(result);}).catch(err => {console.warn(err);//res.status(500).send('上传文件出错');});
});

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/416095.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

教你创建自己的CSDN博客专栏

首先说明一下 专栏创建标准: 1. 申请者的CSDN个人博客中原创技术性博客文章要多于15篇。 2. 申请专栏主题明确,简介翔实清晰,并且与IT技术相关首先进入博客专栏:https://blog.csdn.net/column.html,点击我的专栏跳转预…

开发服务器 VSS开发库 自动备份方案

开发服务器 VSS开发库 自动备份方案 vss开发库每天备份一次,脚本如下:from F:/backup/dev_vss_backup.bat set src_dirf:/dev_vssset dest_file%date:~0,4%%date:~5,2%%date:~8,2%set dest_dirdev_vss;if exist %dest_dir% goto do_itmkdir %dest_dir%;:do_itzip -r…

工作95视频上传逻辑

定好是前端直接把视频传到他们的服务器,还是先到我 们的后端暂存,提交的时候在存到他们那边

JAVA 成员访问权限修饰符

修饰符 类内部 package内 子类 其他 public 允许 允许 允许 允许 protected 允许 允许 允许 不允许 default 允许 允许 …

微信 网页开发 获取地理位置 高德地图显示

1、微信中获取地理位置经纬度 wx.getLocation({type: wgs84, // 默认为wgs84的gps坐标,如果要返回直接给openLocation用的火星坐标,可传入gcj02success: function (res) {const latitude res.latitude // 纬度,浮点数,范围为90 ~…

支付宝异步通知验签失败解决方案

原贴地址:https://openclub.alipay.com/read.php?tid1598&fid69,欢迎大家访问 说明: 验签只需要使用到支付宝公钥 ,而不是使用应用公钥!错误原因: 1.支付宝公钥使用错误导致 2.验签方法使用错误 3.…

工作96:当前页面拿id

reject(){putAction("/order/"this.ListId"/status",{status:-1,remark:""}).then(res>{this.$message({message: 审核撤回状态修改,type: success});this.close();})},/*审核通过的方法 定义在混入里面*/approve(){/*控制审核状态成功*/putA…

使用ftp上传文件到Unix系统注意事项

使用ftp上传文件到Unix系统注意事项 在使用FTP客户端上传文件到Unix系统时,应该注意将传输模式设置为二进制(Binary)传输模式,否则有可能造成传输到Unix系统的文件与实际文件大小不一致,文件无法使用。

度度熊回家

一个数轴上共有N个点,第一个点的坐标是度度熊现在位置,第N-1个点是度度熊的家。现在他需要依次的从0号坐标走到N-1号坐标。但是除了0号坐标和N-1号坐标,他可以在其余的N-2个坐标中选出一个点,并直接将这个点忽略掉,问度…

微信地图 leaflet 腾讯地图

本来在微信项目中使用的高德地图,发现不是想象中的好用,而且用了微信,感觉使用腾讯地图会比较方便,所以,索性使用leaflet腾讯地图的底图来实现。 其中关于正确使用腾讯地图参考了https://github.com/wuxiashuangji/TX…

支付宝会员卡开卡表单模板配置(alipay.marketing.card.formtemplate.set)JAVA版本demo

官方接口文档: https://docs.open.alipay.com/251/105668/ ,我这里写的是开卡组件前两步的操作流程, 仅供参考1. 调用接口前的准备工作(创建应用等)参考该文档 :https://docs.open.alipay.com/251/105731/2.核心代码,这…

AIX 6.1安装JDK6环境变量设置

AIX 6.1安装JDK6环境变量设置 1、将JDK6_64.sdk.tar.gz上通过FTP以二进制(Binary)模式上传到服务器上2、解压JDK:gunzip -c JDK6_64.sdk.tar.gz | tar -xvf -3、通过 SMIT:运行 smitt install。 选择 Install and Update Software…

微信获取位置 转化为 高德地图 位置 地址

从高德地图转到直接使用QQ地图了,留下在微信网页开发中的代码片段 async getLocation () {// 1、获取微信的坐标const { latitude, longitude } await new Promise((resolve, reject) > {wx.getLocation({type: wgs84, // 默认为wgs84的gps坐标,如果…

web项目从Myeclipse迁移到idea的二三事

今天新接手了一个myeclipse项目,想把这个项目从myeclipse迁移到idea,花了点时间,也遇到一些新的问题,打算记录下来。 这是myeclipse的项目结构 我整理一下 整理的时候,我碰到了一下的一下的一些问题: 1 . m…

微信公众平台无法使用支付宝收付款的解决方案

微信中无法打开支付宝收款是微信浏览器限制所致,可以参考下图方法引导用户转到系统浏览器,即可用支付宝收款。点此下载。 1、引导用户选择在浏览器中打开支付链接,以完成支付。如图1所示:图12、用支付宝继续完成支付,如…

vux radio 改造为 tree 代码片段

思路&#xff1a;用全角空格和半角空格做区分。 1、自己写的部分 this.toOptions arr.map(x > {let kong for (let i 1; i < x.level; i i 1) {kong kong  }kong kong let icon https://s1.ax1x.com/2018/09/27/iML0BD.pngif (x.level 1) {icon https://s1…

Linux下部署多个Tomcat

Linux下部署多个Tomcat 1.环境&#xff1a;1.1.Centos 5.01.2.apache-tomcat-6.0.182.需要解决一下几个问题2.1.不同的tomcat启动和关闭监听不同的端口2.2.不同的tomcat的启动文件startup.sh 中要指定各自的CATALINA_HOME和CATALINA_BASE这两个环境变量。3.解决步骤&#xff1a…

将检索出来的列按逗号拼接起来

(STUFF((select , USER_NAME from TBL_BIZ_TRSBILLS_DETAIL where TRANSPORT_CODE TB.TRANSPORT_CODE and USER_TYPE 司机 for xml path()),1,1, )) AS DRIVER_NAMES 这个语句的意思是&#xff1a;用‘&#xff0c;’将查询到的司机姓名拼接起来&#xff0c;然后用 替换掉…