全部產品
Search
文件中心

Object Storage Service:Browser.js常見問題

更新時間:Dec 10, 2024

本文主要介紹Browser.js SDK中的常見問題與解決方案。

如何調用STS

瀏覽器是不受信任的環境,如果把AccessKey ID和AccessKey Secret直接儲存在瀏覽器端,存在極高的風險。建議在瀏覽器環境下使用STS模式進行OSS介面調用。

擷取STS token後,即可進行SDK初始化操作。

<script type="text/javascript">
  $.ajax("http://your_sts_server/",{method: 'GET'},function (err, result) {
    let client = new OSS({
      authorizationV4: true,
      accessKeyId: result.AccessKeyId,
      accessKeySecret: result.AccessKeySecret,
      stsToken: result.SecurityToken,
      region: 'yourRegion',
      bucket: 'yourBucketName'
    });
  });
</script>
            

如何開啟HTTPS訪問

您可以在初始化SDK時,通過設定secure:true的方式開啟HTTPS訪問。更多資訊,請參見初始化

瀏覽器跨域問題如何解決

在瀏覽器中使用SDK前,需要對Bucket配置跨域規則。具體操作,請參見準備工作

如何設定上傳檔案的使用者自訂資料(meta)、檔案類型(mime)和要求標頭(header)

請參見簡單上傳

關於瀏覽器端斷點續傳的說明

將checkpoint儲存到瀏覽器的localstorage,在下次調用時傳入checkpoint參數,即可實現斷點續傳功能。更多資訊,請參見斷點續傳上傳

如何上傳檔案到指定目錄

通過在上傳的Object名稱前指定首碼的方式實現將檔案上傳到指定目錄。

let OSS = require('ali-oss')
let client = new OSS({
  authorizationV4: true,
  region: 'yourRegion',
  accessKeyId: 'yourAccessKeyId',
  accessKeySecret: 'yourAccessKeySecret',
  bucket: 'yourBucketName'
});

client.multipartUpload('base-dir/' +'object-key', 'local-file', {
    progress: async function (p) {
      console.log('Progress: ' + p);
    }
  });
  console.log(result);
}).catch((err) => {
  console.log(err);
});

            

如何上傳base64編碼的圖片

base64先轉碼成指定格式圖片,然後調用OSS上傳介面進行上傳。更多資訊,請參見Github樣本

/**
 * base64 to file
 * @param dataurl   base64 content
 * @param filename  set up a meaningful suffix, or you can set mime type in options
 * @returns {File|*}
 */
const dataURLtoFile = function dataURLtoFile(dataurl, filename) {
  const arr = dataurl.split(',');
  const mime = arr[0].match(/:(.*?);/)[1];
  const bstr = atob(arr[1]);
  let n = bstr.length;
  const u8arr = new Uint8Array(n);
  while (n--) {
    u8arr[n] = bstr.charCodeAt(n);
  }
  return new Blob([u8arr], { type: mime });// if env support File, also can use this: return new File([u8arr], filename, { type: mime });
};

// client表示OSS client執行個體
const uploadBase64Img = function uploadBase64Img(client) {
  // base64格式的內容
  const base64Content = 'data:image:****';
  const filename = 'img.png';
  const imgfile = dataURLtoFile(base64Content, filename);
 //key表示上傳的object key,imgFile表示dataURLtoFile處理後返回的圖片。
  client.multipartUpload(key, imgfile).then((res) => {
    console.log('upload success: %j', res);
  }).catch((err) => {
    console.error(err);
  });
};

如何限制上傳檔案的大小

在瀏覽器中可以根據document.getElementById(“file”).files[0].size擷取上傳檔案的大小(位元組數)。更多資訊,請參見Web端直傳實踐的post請求。

如何擷取上傳進度

您可以通過分區上傳的方式擷取上傳進度。更多資訊,請參見分區上傳

如何擷取下載進度

瀏覽器中無法擷取進度,可調用signatureUrl方法,擷取下載地址。更多資訊,請參見相關文檔

如何擷取Object的簽名URL

可調用signatureUrl方法,擷取下載地址。更多資訊,請參見預覽或下載檔案

如何使用SDK產生的簽名URL並進行資源上傳

簽名URL常用於授權給第三方進行資源的下載和上傳操作。下載請參見上一條。SDK中提供signatureUrl API,用於返回一個經過簽名的URL,使用者直接使用該URL上傳或者下載資源即可。利用簽名URL上傳資源請參見SDK工程樣本簽名URL上傳資源樣本

如何使用表單上傳方式上傳資源到OSS伺服器

請參見Web端直傳實踐

如何運行樣本工程

進入ali-oss/example執行 npm run start

如何添加上傳回調

const uploadFile = function uploadFile(client) {
if (!uploadFileClient || Object.keys(uploadFileClient).length === 0) {
uploadFileClient = client;
}


const file = document.getElementById('file').files[0];
const key = document.getElementById('object-key-file').value.trim() || 'object';


console.log(`${file.name} => ${key}`);
const options = {
progress,
partSize: 500 * 1024,
timeout:60000,
meta: {
year: 2017,
people: 'test',
},
callback: {


// 添加上傳回調的位置。
url: 'https://example.aliyundoc.com/v2/sync',
/* host: 'oss-cn-shenzhen.aliyuncs.com', */
/* eslint no-template-curly-in-string: [0] */
body: 'bucket=${bucket}&object=${object}&var1=${x:var1}',
contentType: 'application/x-www-form-urlencoded',
customValue: {
var1: 'value1',
var2: 'value2',
},
},

關於上傳回調的更多資訊,請參見原理介紹

瀏覽器是否支援以chunck的方法瀏覽檔案?

不支援。

如何通過OSS js SDK進行日誌收集?

具體操作,請參見GitHub

常見錯誤參考