文档

Browser.js简单上传

更新时间:

您可以通过简单上传(即putObject方式)将File对象、Blob数据以及OSS Buffer上传到OSS文件。简单上传时不支持使用进度函数。

前提条件

已安装OSS Browser.js SDK。具体操作,请参见安装

注意事项

  • 当您使用webpack或browserify等打包工具时,请通过npm install ali-oss的方式安装Browser.js SDK。

  • 通过浏览器访问OSS时涉及跨域请求,如果未设置跨域规则,浏览器会拒绝跨域访问请求。如果您希望通过浏览器可以正常访问OSS,需要通过OSS设置跨域规则。具体操作,请参见准备工作

  • 由于Browser.js SDK通常在浏览器环境下使用,为避免暴露阿里云账号访问密钥(AccessKey ID和AccessKey Secret),强烈建议您使用临时访问凭证的方式执行OSS相关操作。

    临时访问凭证包括临时访问密钥(AccessKey ID和AccessKey Secret)和安全令牌(SecurityToken)。获取临时访问凭证的具体操作,请参见使用STS进行临时授权

示例代码

说明

Blob(Binary Large Object)代表二进制类型的大对象。

以下代码用于上传数据到examplebucket中exampledir目录下的exampleobject.txt文件。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
  </head>
  <body>
    <input id="file" type="file" />
    <button id="upload">上传</button>
    <script src="https://gosspublic.alicdn.com/aliyun-oss-sdk-6.18.0.min.js"></script>
    <script>
      const client = new OSS({
        // yourRegion填写Bucket所在地域。以华东1(杭州)为例,yourRegion填写为oss-cn-hangzhou。
        region: "yourRegion",
        // 从STS服务获取的临时访问密钥(AccessKey ID和AccessKey Secret)。
        accessKeyId: "yourAccessKeyId",
        accessKeySecret: "yourAccessKeySecret",
        // 从STS服务获取的安全令牌(SecurityToken)。
        stsToken: "yourSecurityToken",
        // 填写Bucket名称。
        bucket: "examplebucket",
      });

      // 从输入框获取file对象,例如<input type="file" id="file" />。
      let data;
      // 创建并填写Blob数据。
      //const data = new Blob(['Hello OSS']);
      // 创建并填写OSS Buffer内容。
      //const data = new OSS.Buffer(['Hello OSS']);

      const upload = document.getElementById("upload");

      async function putObject(data) {
        try {
          // 填写Object完整路径。Object完整路径中不能包含Bucket名称。
          // 您可以通过自定义文件名(例如exampleobject.txt)或文件完整路径(例如exampledir/exampleobject.txt)的形式实现将数据上传到当前Bucket或Bucket中的指定目录。
          // data对象可以自定义为file对象、Blob数据或者OSS Buffer。
          const options = {
            meta: { temp: "demo" },
            mime: "json",
            headers: { "Content-Type": "text/plain" },
          };
          const result = await client.put("examplefile.txt", data, options);
          console.log(result);
        } catch (e) {
          console.log(e);
        }
      }

      upload.addEventListener("click", () => {
        const data = file.files[0];
        putObject(data);
      });
    </script>
  </body>
</html>

常见问题

简单上传是否支持获取上传进度?

不支持。当前仅分片上传断点续传上传支持获取上传进度。

相关文档

  • 关于简单上传的完整示例代码,请参见GitHub示例

  • 关于简单上传的API接口说明,请参见PutObject

  • 本页导读 (1)