摘要：和數據直傳到相比，以上方法有三個缺點上傳慢。端向服務端請求簽名，然后直接上傳，不會對服務端產生壓力，而且安全可靠。規定返回數據的格式，當前默認返回圖片信息寬度高度，可獲取更多數據。

每個OSS的用戶都會用到上傳服務。Web端常見的上傳方法是用戶在瀏覽器或app端上傳文件到應用服務器，然后應用服務器再把文件上傳到OSS。

和數據直傳到OSS相比，以上方法有三個缺點：

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

擴展性差。如果后續用戶多了，應用服務器會成為瓶頸。

費用高。需要準備多臺應用服務器。由于OSS上傳流量是免費的，如果數據直傳到OSS，不通過應用服務器，那么將能省下幾臺應用服務器。

Web端直傳共有三種方式：

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

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

服務端簽名直傳并設置上傳回調講解在服務端通過PHP代碼完成簽名，并且服務端設置了上傳后回調，然后通過表單直傳數據到OSS。OSS回調完成后，應用服務器再返回結果給客戶端。

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

web端向服務端請求簽名，然后直接上傳，不會對服務端產生壓力，而且安全可靠。然而有個問題，就是用戶上傳了多少文件，上傳了什么文件，服務端并不能馬上知道，如果想實時了解用戶上傳了什么文件，可以采用第三種方式。

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

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) {
          // 下面是簽名直傳服務返回給客戶端的消息body內容的示例，這個body的內容將作為客戶端上傳文件的重要參數。
        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 文件必須放在最后，不然會報key錯誤
      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 文件夾 不存在會自動創建
  bucket: "${bucket}", // oss應用名
  region: "${region}", // oss節點名
  accessKeyId: "${accessKeyId}", // 申請的osskey
  accessKeySecret: "${accessKeySecret}", // 申請的osssecret
  callbackPath: "api/oss/ossCallback", // 回調接口
  expAfter: 6000, // 簽名失效時間
  maxSize: 1048576000, // 最大文件大小
};

獲取簽名接口
服務器返回數據Callback API

// 圖片簽名
  async ossSign() {
    const {
      bucket,
      region,
      expAfter,
      maxSize,
      dirPath,
      accessKeyId,
      accessKeySecret,
      callbackPath,
    } = config;
    const host = `https://${bucket}.${region}.aliyuncs.com`; // 你的oss完整地址
    // 回調接口的主機和端口
    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");
    // 創建簽名
    const Signature = crypto.createHmac("sha1", accessKeySecret).update(policy).digest("base64");
    const callbackBody = {
      // callbackUrl為 上傳回調服務器的URL，請將下面的IP和Port配置為您自己的真實信息。
      callbackUrl: `https://${callbackHost}${callbackPort ? `:${callbackPort}` : ""}/${callbackPath}`,
      callbackHost: `${callbackHost}`,
      // 規定返回數據的格式，當前默認返回圖片信息、寬度、高度，可獲取更多數據。參考上方鏈接
      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, // 對變量policy簽名后的字符串。
        policy, // 用戶表單上傳的策略（Policy），是經過base64編碼過的字符串。
        host, // 用戶要往哪個域名發送上傳請求。
        OSSAccessKeyId: accessKeyId, // 用戶請求的accessid。
        key: expireTime, // 唯一標識，添加到上傳的文件名中防止重復
        success_action_status: 200,
        dirPath, // 文件上傳地址
        callback, // 接口回調
      },
    });
  }

請求回調接口

// 回調
  async ossCallback() {
    const { body = {} } = this.ctx.request;
    // 對應簽名接口中定義的返回數據字段
    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,
      };
    }
  }