項(xiàng)目中有時(shí)需要使用第三方到圖片耕腾，但是如果直接引用第三方到 url，我們將面臨一些風(fēng)險(xiǎn)：第一剃法，我們無法保證該地址長期有效；第二路鹰，網(wǎng)頁中加載該 url 可能無法顯示贷洲，因?yàn)閷?duì)方很可能做了防盜鏈處理，這個(gè)問題在瀏覽器端有這個(gè)限制但是在后端就沒有這個(gè)問題了晋柱。

所以我們需要通過圖片的 url 在服務(wù)端將這個(gè)圖片下載下來保存在服務(wù)器上优构，然后客戶端去訪問我們自己的服務(wù)器，或者把該圖片上傳到 cdn 上雁竞。

首先钦椭，我們可能需要先下載需要到網(wǎng)絡(luò)圖片，先來個(gè)基礎(chǔ)到方法：

const request = require('request');
const fs = require('fs');
const path = require('path');

function downloadUrl(url: string) {
  let filepath = path.join(__dirname, './images/xxx.jpg');
  request(url).pipe(fs.createWriteStream(filepath));
}

// 用以下方式可以監(jiān)聽圖片下載成功與否
function downloadUrl(url: string, outputPath: string) {
  let outputStream = fs.createWriteStream(outputPath)
  return new Promise((resolve, reject) => {
    request(url).pipe(outputStream);
    outputStream.on('error', (error) => {
      console.log('downloadImage error', error);
      resolve(false)
    })
    outputStream.on('close', () => {
      console.log('downloadImage 文件下載完成');
      resolve(true)
    });
  })
}

如果我們需要把該圖片上傳到 cdn 上時(shí)，我們可以直接傳可讀 stream（ let readableStream = request(url) ）彪腔，可以簡化下載圖片到服務(wù)器 - 上傳圖片到cdn - 刪除臨時(shí)圖片這個(gè)過程侥锦。這里以七牛為例，需要安裝 qiniu 的庫德挣。

const request = require('request');
const fs = require('fs');
const path = require('path');
import * as qiniu from 'qiniu';

// 獲取七牛 token
export async function getToken(): Promise<string> {
  const accessKey = CONSTANTS.QINIU.AK;
  const secretKey = CONSTANTS.QINIU.SK;
  const mac = new qiniu.auth.digest.Mac(accessKey, secretKey);
  const putPolicy = new qiniu.rs.PutPolicy({
    scope: CONSTANTS.QINIU.BUCKET
  });
  const uploadToken = putPolicy.uploadToken(mac);
  return uploadToken;
}

export async function upload2CDN(url) {
  let readableStream = request(url);
  const key = `images/xxx_${Date.now()}.jpg`;
  const token = await getToken();
  return new Promise((resolve, reject) => {
    try {
      formUploader.putStream(
        token,
        key,
        readableStream,
        putExtra,
        (respErr, respBody, respInfo) => {
          if (respErr) {
            return resolve(null);
          }
          if (respInfo.statusCode == 200) {
            return resolve(respBody && respBody.key || key);
          } else {
            return resolve(null);
          }
        }
      );
    } catch (e) {
      return resolve(null);
    }
  })
}

以上方法只能單次處理一張圖片捎拯，需要處理多張圖片時(shí)代碼可以參考下面到代碼：

import * as qiniu from 'qiniu';
const config: any = new qiniu.conf.Config();
config.zone = qiniu.zone.Zone_z2;
const formUploader = new qiniu.form_up.FormUploader(config);
const putExtra = new qiniu.form_up.PutExtra();

async uploadFiles(urls: any[], type: string, token?: string) {
  if (!token) {
    token = await get_token();
  }
  let keys = {};
  for (let url of urls) {
    let requestUrl = url.url.trim();
    if (!requestUrl || !/(https?|ftp|file):\/\/\w+\.\w+/.test(requestUrl)) {
      keys[url.id] = null;
      continue
    }
    const uploadFunc = async () => {
      return new Promise((resolve, reject) => {
        let readableStream = request(requestUrl);
        const key = `images/xxx_${Date.now()}.jpg`;
        try {
          formUploader.putStream(
            token,
            key,
            readableStream,
            putExtra,
            (respErr, respBody, respInfo) => {
              if (respInfo.statusCode == 200) {
                return resolve(respBody && respBody.key);
              } else {
                return resolve(null);
              }
            }
          );
        } catch (e) {
          return resolve(null);
        }
      })
    }
    const key = await uploadFunc();
    this.app.logger.info('key: ', key);
    keys[url.id] = key;
  }
  return keys;
}