摘要：最近在做微信公眾號(hào)，需要將圖片上傳至阿里云。利用模塊將圖片寫(xiě)到內(nèi)存微信多媒體文件文件路徑圖片上傳阿里云結(jié)果上傳文件出錯(cuò)這種方式將圖片暫存在內(nèi)存里面，那如果并發(fā)量很大，是不是內(nèi)存要爆炸了都感覺(jué)還是不可取。

最近在做微信公眾號(hào)，需要將圖片上傳至阿里云OSS。在做這個(gè)功能的過(guò)程中，我走了不少?gòu)澛罚瑖L試過(guò)很多種方法，最后終于研究出一種便捷優(yōu)美的方式。現(xiàn)在把這些方法和思路記錄下來(lái)，避免遺忘。

這種方式最簡(jiǎn)單。因?yàn)槲⑿殴娞?hào)的跳轉(zhuǎn)頁(yè)面是基于QQ瀏覽器的，所以可以直接使用HTML的input元素選擇圖片。

OSS有一個(gè)Post Object的接口允許HTML表單上傳文件，除了文件（file）之外，還有一些其他的字段如保存到OSS的路徑（key）、策略（policy）、自己的OSS應(yīng)用的accessKeyId、簽名（signature）等。

所以需要構(gòu)造表單。一般有兩種方式：

像下面代碼這樣構(gòu)造form元素，然后利用$("form").submit()提交。

像下面這樣構(gòu)造FormData對(duì)象，再通過(guò)ajax或fetch post表單數(shù)據(jù)。

const formData = new FormData();
formData.append("key", filePath); // OSS的保存路徑
formData.append("policy", policy); // 策略
formData.append("OSSAccessKeyId", accessKeyId); // OSS對(duì)象的標(biāo)識(shí)
formData.append("success_action_status", "200"); // 成功返回碼
formData.append("signature", signature); // 簽名
formData.append("file", file); // 圖片文件，$("input[name="pic"]").files[0]

上面的方法雖然簡(jiǎn)單直接，但只能從相冊(cè)中選擇圖片，而想要拍攝圖片并上傳，則必須通過(guò)微信JS-SDK來(lái)調(diào)用相機(jī)。

wx.chooseImage({
  count: 1, // 默認(rèn)9
  sizeType: ["original", "compressed"], // 可以指定是原圖還是壓縮圖，默認(rèn)二者都有
  sourceType: ["album", "camera"], // 可以指定來(lái)源是相冊(cè)還是相機(jī)，默認(rèn)二者都有
  success: function (res) {
    // 返回選定照片的本地ID列表，localId可以作為img標(biāo)簽的src屬性顯示圖片
    var localIds = res.localIds; 
  }
});

這里有個(gè)問(wèn)題，微信JS-SDK選擇圖片之后返回的是圖片的標(biāo)識(shí)id，而不是實(shí)際的圖片文件，所以不能構(gòu)造form表單上傳OSS。

那該怎么辦呢？思路：將圖片先上傳至微信的服務(wù)器（最多保存3天），再通過(guò)微信的下載多媒體文件接口（http://file.api.weixin.qq.com...）將圖片下載到服務(wù)器，再上傳至OSS（雖然有點(diǎn)繞，但可行）。

客戶(hù)端代碼：

wx.chooseImage({
  count: 1, // 默認(rèn)9
  sizeType: ["original", "compressed"],
  sourceType: ["album", "camera"],
  success: function (res) {
    var localIds = res.localIds;
    wx.uploadImage({
      localId: localIds[0], // 需要上傳的圖片的本地ID，由chooseImage接口獲得
      isShowProgressTips: 1, // 默認(rèn)為1，顯示進(jìn)度提示
      success: function (res) {
        var serverId = res.serverId; // 返回圖片的服務(wù)器端ID
        // do something ...
        // 調(diào)用自己搭建的服務(wù)端的api，傳入serverId，做獲取微信圖片上傳OSS的相關(guān)操作
        doSomething();
      }
    });
  }
});

小tips：選擇圖片時(shí)只要選擇了compressed，微信就會(huì)自動(dòng)幫我們壓縮圖片，官方文檔也說(shuō)明上傳的多媒體文件會(huì)控制格式和大小，其中圖片控制在jpg格式和1M以下的大小。所以，基本不用考慮圖片過(guò)大的問(wèn)題。實(shí)測(cè)中，8M的圖片壓縮后只有120KB左右。

服務(wù)端的代碼經(jīng)過(guò)了3次的演變才完善：

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，這里不細(xì)說(shuō)
const accessToken = "access token";
const mediaId = "xxxxxxx"; // 微信多媒體文件id
const destPath = `weixin/images/201702/${mediaId}.jpg`; // OSS文件路徑，按自己喜歡構(gòu)造咯
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("圖片上傳阿里云結(jié)果", result);
    fs.unlink(`${mediaId}.jpg`);
    // res.status(200).json(result);
  }).catch(err => {
    console.warn(err);
    //res.status(500).send("上傳文件出錯(cuò)");
  });
});

這種方式需要頻繁地寫(xiě)文件和刪文件，感覺(jué)一點(diǎn)都不極客。

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("圖片上傳阿里云結(jié)果", result);
    // res.status(200).json(result);
  }).catch(err => {
    console.warn(err);
    //res.status(500).send("上傳文件出錯(cuò)");
  });
});

這種方式將圖片暫存在內(nèi)存里面，那如果并發(fā)量很大，是不是內(nèi)存要爆炸了都？感覺(jué)還是不可取。

折騰了好久，發(fā)現(xiàn)原來(lái)可以這么簡(jiǎn)單和優(yōu)雅：

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的響應(yīng)結(jié)果response可以作為讀取流傳給ossClient
  co(function* () {
    const result = yield ossClient.putStream(destPath, response, {timeout: 30 * 60 * 1000});
    console.log("圖片上傳阿里云結(jié)果", result);
    // res.status(200).json(result);
  }).catch(err => {
    console.warn(err);
    //res.status(500).send("上傳文件出錯(cuò)");
  });
});

這種方式省去了前面兩種方式的中間步驟，更加簡(jiǎn)練直接，個(gè)人認(rèn)為是最好的。