[微信小程序]上传图片到阿里云OSS

@AuthorGQ2021年07月30日

我的方法需要借助客服功能来实现，虽然繁琐，但是目的达成了~

1.将小程序选择的照片上传至微信临时服务器并返回图片url;(需要开通客服功能)

2.将url返回给自己的后台,后台通过url获取流再上传至阿里OSS;

这里实现第二步:

关于如何开通客服功能的消息的配置可以看我的上一篇博客点我查看

上传图片到微信临时服务器

首先要获取到access_token，有效期2小时，token详情看这里

GET方法请求

//获取access_token

s://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=APPID&secret=APPSECRET

1

2

1

2

参数

说明

grant_type

填client_credential

appid

第三方用户优选凭证

secret

上微信公众平台小程序扫二维码查看

返回

//获取成功返回

{

"access_token":"ACCESS_TOKEN",

"expires_in":7200

}

拿到access_token后就可以上传临时文件了

//上传临时文件

s://api.weixin.qq.com/cgi-bin/media/upload?access_token=ACCESS_TOKEN&type=TYPE

GET方法请求

参数

说明

access_token

调用接口凭证

type

看下面

media

form-data中媒体文件标识

图片（image）:1M，支持JPG格式

语音（voice）：2M，播放长度不超过60s，支持AMR\MP3格式

视频（video）：10MB，支持MP4格式

缩略图（thumb）：64KB，支持JPG格式

媒体文件在后台保存时间为3天，即3天后media_id失效。

各位记住了，详情看这里

返回

//上传成功返回

{

"type":"image",

"media_id":"R-Y5NXGd1tUUeKKEX37eV5q63MoPNQKW8xpnb_29Z3Yp22flghiZIRuGny0uYBRZ",

"created_at":

}

这里的media_id就是刚才上传的文件，怎么打开呢？不要慌!

用微信官方调试工具即可查看刚才上传的图片

假如出现下图的样子，就表示success了，但是图片不应该是返回url吗?怎么返回只有个header

其实返回的是图片的流

假如想要看一下图片呢，可以在浏览器直接输下面这段就会提示下载图片，参数上面都有

//获取文件

s://api.weixin.qq.com/cgi-bin/media/get?access_token=ACCESS_TOKEN&media_id=MEDIA_ID

1

2

1

2

既然上传成功了，也看到图片了，下面就该上传到阿里云OSS上并返回url

阿里云官方文档有写，我后台用的是NodeJs，大家根据自己的后台看阿里文档

就是通过读取微信临时服务器图片的流到OSS并转成图片存起来，然后返回给咱们阿里的图片url

呵(ni)呵(mei)哒(de)~官方总是写的简单难懂，能少写就少写!

我贴一下Node后台上传图片的代码

varexpress=require('express');

varrouter=express.Router();

varfs=require('fs');

varcommonResult=require('/service/commonResult');

//阿里云OSS

varco=require('co');

varOSS=require('ali-oss');

varclient=newOSS({

region:'oss-cn-beijing',//填自己的

accessKeyId:'xxx',//填自己的

accessKeySecret:'xxx',//填自己的

endPoint:'',//假如指定了endpoint，则region会被忽略

bucket:'xxx'//填自己的

});

//上传图片文件

router.post('/uploadFile',function(req,res,next){

varurl=req.body.url;//这个url是微信小程序直接全部传过来的,就是刚才直接复制在浏览器就能下载到图片的那个。打印出来是这样的:s://api.weixin.qq.com/cgi-bin/media/get?access_token=ACCESS_TOKEN&media_id=MEDIA_ID

vartimestamp=newDate().getTime();

varpath='www.tianxianmao.com/zatan/test';

varkey='test/'+timestamp;

//选择bucket

client.useBucket('xxx');//填自己的

//获取远程文件，并以流写入文件

console.log("微信临时文件地址="+url)

varstream=request(url).pipe(fs.createWriteStream(path));

stream.on('error',function(err){

console.log(err);

});

//流写入完毕

stream.on('finish',function(){

co(function*(){

varresult=yieldclient.put(key,path);

console.log(result);

commonResult.returnSuccess(res,result.url);

}).catch(function(err){

console.log(err);

commonResult.returnFailed(res,"上传失败");

});

});

});

module.exports=router;