Object Storage Service：Browser.js授權訪問

let credentials = null;
const form = document.querySelector("form");
form.addEventListener("submit", async (event) => {
  event.preventDefault();
  // 臨時憑證到期時，才重新擷取，減少對STS服務的調用。
  if (isCredentialsExpired(credentials)) {
    const response = await fetch("/get_sts_token_for_oss_upload", {
      method: "GET",
    });
    if (!response.ok) {
      // 處理錯誤的HTTP狀態代碼。
      throw new Error(
        `擷取STS令牌失敗: ${response.status} ${response.statusText}`
      );
    }
    credentials = await response.json();
  }
  const client = new OSS({
    // 將<YOUR_BUCKET>設定為OSS Bucket名稱。
    bucket: "<YOUR_BUCKET>",
    // 將<YOUR_REGION>設定為OSS Bucket所在地區，例如region: 'oss-cn-hangzhou'。
    region: "oss-<YOUR_REGION>",
    authorizationV4: true,
    accessKeyId: credentials.AccessKeyId,
    accessKeySecret: credentials.AccessKeySecret,
    stsToken: credentials.SecurityToken,
  });

  const fileInput = document.querySelector("#file");
  const file = fileInput.files[0];
  const result = await client.put(file.name, file);
  console.log(result);
});

/**
 * 判斷臨時憑證是否到期。
 **/
function isCredentialsExpired(credentials) {
  if (!credentials) {
    return true;
  }
  const expireDate = new Date(credentials.Expiration);
  const now = new Date();
  // 如果有效期間不足一分鐘，視為到期。
  return expireDate.getTime() - now.getTime() <= 60000;
}

const form = document.querySelector("form");
const fileInput = document.querySelector("#file");
form.addEventListener("submit", (event) => {
  event.preventDefault();
  const file = fileInput.files[0];
  const filename = fileInput.files[0].name;
  fetch("/get_post_signature_for_oss_upload", { method: "GET" })
    .then((response) => {
      if (!response.ok) {
        throw new Error("擷取簽名失敗");
      }
      return response.json();
    })
    .then((data) => {
      const formData = new FormData();
      formData.append("name", filename);
      formData.append("policy", data.policy);
      formData.append("OSSAccessKeyId", data.ossAccessKeyId);
      formData.append("success_action_status", "200");
      formData.append("signature", data.signature);
      formData.append("key", data.dir + filename);
      formData.append("file", file);

      return fetch(data.host, { method: "POST", body: formData });
    })
    .then((response) => {
      if (response.ok) {
        console.log("上傳成功");
        alert("檔案已上傳");
      } else {
        console.log("上傳失敗", response);
        alert("上傳失敗，請稍後再試");
      }
    })
    .catch((error) => {
      console.error("發生錯誤:", error);
    });
});

const form = document.querySelector("form");
form.addEventListener("submit", (event) => {
  event.preventDefault();
  const fileInput = document.querySelector("#file");
  const file = fileInput.files[0];
  fetch("/get_presigned_url_for_oss_upload", { method: "GET" })
    .then((response) => {
      if (!response.ok) {
        throw new Error("擷取預簽名URL失敗");
      }
      return response.text();
    })
    .then((url) => {
      const formData = new FormData();
      formData.append("file", file);
      fetch(url, {
        method: "PUT",
        headers: new Headers({
          "Content-Type": "image/png",
        }),
        body: file,
      }).then((response) => {
        if (!response.ok) {
          throw new Error("檔案上傳到OSS失敗");
        }
        console.log(response);
        alert("檔案已上傳");
      });
    })
    .catch((error) => {
      console.error("發生錯誤:", error);
      alert(error.message);
    });
});