@Author GQ 2017年07月30日  

我的方法需要借助客服功能來實現，雖然繁瑣，但是目的達成了~

1.將小程序選擇的照片上傳至微信臨時服務器并返回圖片url;(需要開通客服功能)
2.將url返回給自己的后臺,后臺通過url獲取流再上傳至阿里OSS;

這里實現第二步:

•  

關于如何開通客服功能的消息的配置可以看我的上一篇博客點我查看

---

上傳圖片到微信臨時服務器

首先要獲取到access_token，有效期2小時，token詳情看這里

GET方法請求

//獲取access_token
https://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后就可以上傳臨時文件了

//上傳臨時文件
https://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": 1501137599
}

•  

• 這里的media_id就是剛才上傳的文件，怎么打開呢？不要慌!

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

如果出現下圖的樣子，就表示success了，但是圖片不應該是返回url嗎 ? 怎么返回只有個header

• 其實返回的是圖片的流

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

//獲取文件
https://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后臺上傳圖片的代碼

var express = require('express');
var router = express.Router();
var fs = require('fs');
var commonResult = require('../../service/commonResult');



//阿里云OSS
var co = require('co');
var OSS = require('ali-oss');

var client = new OSS({
    region: 'oss-cn-beijing',//填自己的
    accessKeyId: 'xxx',//填自己的
    accessKeySecret: 'xxx',//填自己的
    endPoint: 'http://oss-cn-beijing.aliyuncs.com',//如果指定了endpoint，則region會被忽略
    bucket: 'xxx'//填自己的
});

//上傳圖片文件
router.post('/uploadFile', function (req, res, next) {
    var url = req.body.url;//這個url是微信小程序直接全部傳過來的,就是剛才直接復制在瀏覽器就能下載到圖片的那個。打印出來是這樣的: https://api.weixin.qq.com/cgi-bin/media/get?access_token=ACCESS_TOKEN&media_id=MEDIA_ID

    var timestamp = new Date().getTime();
    var path = './test';
    var key = 'test/' + timestamp;

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

    //獲取遠程文件，并以流寫入文件
    console.log("微信臨時文件地址 = " + url)
    var stream = request(url).pipe(fs.createWriteStream(path));
    stream.on('error', function (err) {
        console.log(err);
    });
    //流寫入完畢
    stream.on('finish', function () {
        co(function*() {
            var result = yield client.put(key, path);
            console.log(result);
            commonResult.returnSuccess(res, result.url);
        }).catch(function (err) {
            console.log(err);
            commonResult.returnFailed(res, "上傳失敗");
        });
    });
});


module.exports = router;

•  

• commonResult是一個返回Json格式數據的稍微封裝了一下

var CommonResult = require('../models/commonResult');

/**
 * 返回失敗
 * @param err
 * @param res
 */
exports.returnFailed = function (res, err) {
    var commonResult = new CommonResult();
    commonResult.success = false;
    commonResult.message = err;
    commonResult.data = null;
    res.send(commonResult);
};

/**
 * 返回成功
 * @param res
 */
exports.returnSuccess = function (res, data) {
    var commonResult = new CommonResult();
    commonResult.success = true;
    commonResult.message = "獲取成功";
    if (data != null && data != "") {
        commonResult.data = data;
    } else {
        commonResult.data = null;
    }
    res.send(commonResult);
};

•  

• 當然有個實體CommonResult

function CommonResult() {
    this.success;
    this.message;
    this.data;
}

module.exports = CommonResult;

•  

注意引入的路徑問題，看自己項目的路徑自行修改下，Node后臺就回返回給微信小程序一個上傳完成的url地址了，這樣可以直接點擊url查看圖片了，然后拿到url該干嘛干嘛~

小程序文檔里確實有個拓展接口

wx.base64ToArrayBuffer(base64)

當然，小程序上傳的圖片直接轉化為流直接post上傳是最佳的選擇，但是查了許多資料都沒能實現，還望有大神指導~

//網上資料都是這個，不能用還是不會用???!!!
var uploadImage = this.data.imageList[0]
var reader = new FileReader()
reader.onload = function (e) {
      var arrayBuffer = reader.result;
      var base64 = wx.arrayBufferToBase64(arrayBuffer)
}
reader.readAsArrayBuffer(new Blob(this.data.imageList))