[微信小程序]上傳圖片到阿里云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.brucezhang.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;