[微信小程序]上傳圖片到阿里云OSS

@AuthorGQ2021年07月30日

我的方法需要借助客服功能來實(shí)現(xiàn)，雖然繁瑣，但是目的達(dá)成了~

1.將小程序選擇的照片上傳至微信臨時服務(wù)器并返回圖片url;(需要開通客服功能)

2.將url返回給自己的后臺,后臺通過url獲取流再上傳至阿里OSS;

這里實(shí)現(xiàn)第二步:

關(guān)于如何開通客服功能的消息的配置可以看我的上一篇博客點(diǎn)我查看

上傳圖片到微信臨時服務(wù)器

首先要獲取到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

參數(shù)

說明

grant_type

填client_credential

appid

第三方用戶優(yōu)選憑證

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方法請求

參數(shù)

說明

access_token

調(diào)用接口憑證

type

看下面

media

form-data中媒體文件標(biāo)識

圖片（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就是剛才上傳的文件，怎么打開呢？不要慌!

用微信官方調(diào)試工具即可查看剛才上傳的圖片

假如出現(xiàn)下圖的樣子，就表示success了，但是圖片不應(yīng)該是返回url嗎?怎么返回只有個header

其實(shí)返回的是圖片的流

假如想要看一下圖片呢，可以在瀏覽器直接輸下面這段就會提示下載圖片，參數(shù)上面都有

//獲取文件

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

1

2

1

2

既然上傳成功了，也看到圖片了，下面就該上傳到阿里云OSS上并返回url

阿里云官方文檔有寫，我后臺用的是NodeJs，大家根據(jù)自己的后臺看阿里文檔

就是通過讀取微信臨時服務(wù)器圖片的流到OSS并轉(zhuǎn)成圖片存起來，然后返回給咱們阿里的圖片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是微信小程序直接全部傳過來的,就是剛才直接復(fù)制在瀏覽器就能下載到圖片的那個。打印出來是這樣的:s://api.weixin.qq.com/cgi-bin/media/get?access_token=ACCESS_TOKEN&media_id=MEDIA_ID

vartimestamp=newDate().getTime();

varpath='m.meyanliao.com/zatan/test';

varkey='test/'+timestamp;

//選擇bucket

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

//獲取遠(yuǎn)程文件，并以流寫入文件

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;