摘要：和數(shù)據(jù)直傳到相比，以上方法有三個(gè)缺點(diǎn)上傳慢。端向服務(wù)端請(qǐng)求簽名，然后直接上傳，不會(huì)對(duì)服務(wù)端產(chǎn)生壓力，而且安全可靠。規(guī)定返回?cái)?shù)據(jù)的格式，當(dāng)前默認(rèn)返回圖片信息寬度高度，可獲取更多數(shù)據(jù)。

每個(gè)OSS的用戶都會(huì)用到上傳服務(wù)。Web端常見的上傳方法是用戶在瀏覽器或app端上傳文件到應(yīng)用服務(wù)器，然后應(yīng)用服務(wù)器再把文件上傳到OSS。

和數(shù)據(jù)直傳到OSS相比，以上方法有三個(gè)缺點(diǎn)：

上傳慢。先上傳到應(yīng)用服務(wù)器，再上傳到OSS，網(wǎng)絡(luò)傳送比直傳到OSS多了一倍。如果直傳到OSS，不通過應(yīng)用服務(wù)器，速度將大大提升，而且OSS采用BGP帶寬，能保證各地各運(yùn)營(yíng)商的速度。

擴(kuò)展性差。如果后續(xù)用戶多了，應(yīng)用服務(wù)器會(huì)成為瓶頸。

費(fèi)用高。需要準(zhǔn)備多臺(tái)應(yīng)用服務(wù)器。由于OSS上傳流量是免費(fèi)的，如果數(shù)據(jù)直傳到OSS，不通過應(yīng)用服務(wù)器，那么將能省下幾臺(tái)應(yīng)用服務(wù)器。

Web端直傳共有三種方式：

JavaScript客戶端簽名直傳講解在客戶端通過JavaScript代碼完成簽名，然后通過表單直傳數(shù)據(jù)到OSS。

服務(wù)端簽名后直傳講解在服務(wù)端通過PHP代碼完成簽名，然后通過表單直傳數(shù)據(jù)到OSS。

服務(wù)端簽名直傳并設(shè)置上傳回調(diào)講解在服務(wù)端通過PHP代碼完成簽名，并且服務(wù)端設(shè)置了上傳后回調(diào)，然后通過表單直傳數(shù)據(jù)到OSS。OSS回調(diào)完成后，應(yīng)用服務(wù)器再返回結(jié)果給客戶端。

在客戶端通過JavaScript代碼完成簽名，無需過多配置，即可實(shí)現(xiàn)直傳，非常方便。但是客戶端通過JavaScript把AccesssKeyID 和AccessKeySecret寫在代碼里面有泄露的風(fēng)險(xiǎn)。

web端向服務(wù)端請(qǐng)求簽名，然后直接上傳，不會(huì)對(duì)服務(wù)端產(chǎn)生壓力，而且安全可靠。然而有個(gè)問題，就是用戶上傳了多少文件，上傳了什么文件，服務(wù)端并不能馬上知道，如果想實(shí)時(shí)了解用戶上傳了什么文件，可以采用第三種方式。

本文將演示如何通過第三種方式完成文件直傳到OSS服務(wù)器。

window.onload = function () {
    let upload = document.getElementById("upload")
    let link = document.getElementById("link")
    let obj = {}
    // 獲取簽名地址
    // const url = "http://gt-activity.gtdreamlife.com/api/oss/ossSign"
    axios.get(url).then(res => {
      if (res.data.statusCode === 200) {
          // 下面是簽名直傳服務(wù)返回給客戶端的消息body內(nèi)容的示例，這個(gè)body的內(nèi)容將作為客戶端上傳文件的重要參數(shù)。
        let {
          dirPath,
          key,
          host,
          policy,
          Signature,
          callback,
          OSSAccessKeyId
        } = res.data.result
        obj.host = host
        obj.key = dirPath + key + "${filename}"
        obj.policy = policy
        obj.Signature = Signature
        obj.callback = callback
        obj.OSSAccessKeyId = OSSAccessKeyId
        console.log(obj)
      } else {
        alert(res.data.message)
      }
    })
    document.querySelector("#file").onchange = function (e) {
      let data = e.target.files[0]
      console.log(data)
      let formData = new FormData()
      for (let key in obj) {
        formData.append(key, obj[key])
      }
      // append 文件必須放在最后，不然會(huì)報(bào)key錯(cuò)誤
      formData.append("file", data)
      axios.post(obj.host, formData).then(res => {
        const result = res.data
        document.querySelector("#link").value = result.data
      })
    }
  }

阿里云OSS配置信息

const config = {
  dirPath: "oss/file/", // oss 文件夾 不存在會(huì)自動(dòng)創(chuàng)建
  bucket: "${bucket}", // oss應(yīng)用名
  region: "${region}", // oss節(jié)點(diǎn)名
  accessKeyId: "${accessKeyId}", // 申請(qǐng)的osskey
  accessKeySecret: "${accessKeySecret}", // 申請(qǐng)的osssecret
  callbackPath: "api/oss/ossCallback", // 回調(diào)接口
  expAfter: 6000, // 簽名失效時(shí)間
  maxSize: 1048576000, // 最大文件大小
};

獲取簽名接口
服務(wù)器返回?cái)?shù)據(jù)Callback API

// 圖片簽名
  async ossSign() {
    const {
      bucket,
      region,
      expAfter,
      maxSize,
      dirPath,
      accessKeyId,
      accessKeySecret,
      callbackPath,
    } = config;
    const host = `https://${bucket}.${region}.aliyuncs.com`; // 你的oss完整地址
    // 回調(diào)接口的主機(jī)和端口
    const { callbackHost, callbackPort } = this.app.config.oss;
    const expireTime = new Date().getTime() + expAfter;
    const expiration = new Date(expireTime).toISOString();
    const policyString = JSON.stringify({
      expiration,
      conditions: [
        [ "content-length-range", 0, maxSize ],
        [ "starts-with", "$key", dirPath ],
      ],
    });
    const policy = Buffer(policyString).toString("base64");
    // 創(chuàng)建簽名
    const Signature = crypto.createHmac("sha1", accessKeySecret).update(policy).digest("base64");
    const callbackBody = {
      // callbackUrl為 上傳回調(diào)服務(wù)器的URL，請(qǐng)將下面的IP和Port配置為您自己的真實(shí)信息。
      callbackUrl: `https://${callbackHost}${callbackPort ? `:${callbackPort}` : ""}/${callbackPath}`,
      callbackHost: `${callbackHost}`,
      // 規(guī)定返回?cái)?shù)據(jù)的格式，當(dāng)前默認(rèn)返回圖片信息、寬度、高度，可獲取更多數(shù)據(jù)。參考上方鏈接
      callbackBody: "{"filename": ${object},"size": ${size},"width": ${imageInfo.width},"height": ${imageInfo.height}}",
      callbackBodyType: "application/json",
    };
    const callback = Buffer(JSON.stringify(callbackBody)).toString("base64");
    this.ctx.body = ({
      statusCode: 200,
      message: "oss簽名成功",
      result: {
        Signature, // 對(duì)變量policy簽名后的字符串。
        policy, // 用戶表單上傳的策略（Policy），是經(jīng)過base64編碼過的字符串。
        host, // 用戶要往哪個(gè)域名發(fā)送上傳請(qǐng)求。
        OSSAccessKeyId: accessKeyId, // 用戶請(qǐng)求的accessid。
        key: expireTime, // 唯一標(biāo)識(shí)，添加到上傳的文件名中防止重復(fù)
        success_action_status: 200,
        dirPath, // 文件上傳地址
        callback, // 接口回調(diào)
      },
    });
  }

請(qǐng)求回調(diào)接口

// 回調(diào)
  async ossCallback() {
    const { body = {} } = this.ctx.request;
    // 對(duì)應(yīng)簽名接口中定義的返回?cái)?shù)據(jù)字段
    const { filename, height, width } = body;
    if (filename) {
      this.ctx.body = ({
        status: 200,
        message: "操作成功",
        data: `https://${config.bucket}.${config.region}.aliyuncs.com/${filename}#w=${width}#h=${height}`,
      });
    } else {
      this.ctx.body = {
        status: 500,
        message: "操作失敗",
        data: null,
      };
    }
  }