全部产品
Search
文档中心

对象存储 OSS:Browser.js拷贝文件

更新时间:Nov 12, 2024

本文介绍如何将源Bucket中的文件(Object)复制到同一地域下相同或不同目标Bucket中。

注意事项

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

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

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

  • 拷贝文件涉及的源Bucket与目标Bucket均需要配置跨域规则。具体操作,请参见准备工作

同一Bucket内拷贝文件

以下代码用于在examplebucket内将srcobject.txt文件拷贝至destobject.txt文件。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <title>Document</title>
</head>

<body>
  <button id='upload'>上传</button>
  <button id='copy'>拷贝</button>
    <!--导入SDK文件-->
  <script type="text/javascript" src="https://gosspublic.alicdn.com/aliyun-oss-sdk-6.18.0.min.js"></script>
  <script type="text/javascript">
    const client = new OSS({
       // yourRegion填写Bucket所在地域。以华东1(杭州)为例,yourRegion填写为oss-cn-hangzhou。
       region: 'yourRegion',
       authorizationV4: true,
       // 从STS服务获取的临时访问密钥(AccessKey ID和AccessKey Secret)。
       accessKeyId: 'yourAccessKeyId',
       accessKeySecret: 'yourAccessKeySecret',
       // 从STS服务获取的安全令牌(SecurityToken)。
       stsToken: 'yourSecurityToken',
       // 填写Bucket名称,例如examplebucket。
       bucket: "examplebucket",
     });

    const upload = document.getElementById('upload')
    const copy = document.getElementById('copy')

    // 指定待上传的文件内容。
    const file = new Blob(['examplecontent'])
    // 指定待上传文件的完整路径,例如srcobject.txt。
    const fileName = 'srcobject.txt'

    // 上传文件。
    upload.addEventListener('click', () => {
      const result = client.put(fileName, file).then(r => console.log(r))
    })

    // 拷贝文件。
    copy.addEventListener('click', () => {
      // 指定拷贝后的文件名称。
      client.copy('destobject.txt', fileName
        // 设置目标文件的HTTP头和自定义目标文件的元数据。
        //{
            // 指定headers参数,设置目标文件的HTTP头。如果未指定headers参数,则目标文件与源文件的HTTP头相同,即拷贝源文件的HTTP头。
            // headers:{
            //'Cache-Control': 'no-cache',        
            // 如果源Object的ETag值和您提供的ETag相等,则执行拷贝操作,并返回200 OK。
            //'if-match': '5B3C1A2E053D763E1B002CC607C5****',
            // 如果源Object的ETag值和您提供的ETag不相等,则执行拷贝操作,并返回200 OK。
            //'if-none-match': '5B3C1A2E053D763E1B002CC607C5****', 
            // 如果指定的时间早于文件实际修改时间,则执行拷贝操作,并返回200 OK。
            //'if-modified-since': '2021-12-09T07:01:56.000Z', 
            // 如果指定的时间晚于文件实际修改时间,则执行拷贝操作,并返回200 OK。
            //'if-unmodified-since': '2021-12-09T07:01:56.000Z', 
            // 指定OSS创建目标Object时的访问权限,此处设置为private,表示只有Object的拥有者和授权用户有该Object的读写权限,其他用户没有权限操作该Object。
            //'x-oss-object-acl': 'private', 
            // 指定Object的对象标签,可同时设置多个标签。
            //'x-oss-tagging': 'Tag1=1&Tag2=2',
            // 指定CopyObject操作时是否覆盖同名目标Object。此处设置为true,表示禁止覆盖同名Object。
            //'x-oss-forbid-overwrite': 'true', 
    //},
        // 指定meta参数,自定义目标文件的元数据。如果未指定meta参数,目标文件与源文件的元数据相同,即拷贝源文件的元数据。
        // meta:{
            // location: 'hangzhou',
            // year: 2015,
            // people: 'mary'
        //}
        // }
      ).then(r => {
        console.log(r.res.status)
      })
    })

  </script>
</body>

</html>

不同Bucket间拷贝文件

以下代码用于将源存储空间srcbucket内srcobject.txt文件拷贝至目标存储空间的destbucket的destobject.txt文件。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
  </head>

  <body>
    <button id="copy">复制</button>
    <!--导入SDK文件-->
    <script
      type="text/javascript"
      src="https://gosspublic.alicdn.com/aliyun-oss-sdk-6.18.0.min.js"
    ></script>
    <script type="text/javascript">
      const client = new OSS({
        // yourRegion填写Bucket所在地域。以华东1(杭州)为例,yourRegion填写为oss-cn-hangzhou。
        region: "yourRegion",
        authorizationV4: true,
        // 从STS服务获取的临时访问密钥(AccessKey ID和AccessKey Secret)。
        accessKeyId: "yourAccessKeyId",
        accessKeySecret: "yourAccessKeySecret",
        // 从STS服务获取的安全令牌(SecurityToken)。
        stsToken: "yourSecurityToken",
        // 填写目标bucket名称。
        bucket: "destbucket",
      });
      const copy = document.getElementById("copy");

      copy.addEventListener("click", () => {
        client
          .copy(
            // 填写拷贝后的文件名称。
            "srcobject.txt",
            // 填写拷贝前的文件名称。
            "destobject.txt",
            // 填写源Bucket名称。
            "srcbucket"
          )
          .then((r) => console.log(r));
      });
    </script>
  </body>
</html>

相关文档

  • 关于拷贝文件的完整示例代码,请参见GitHub示例

  • 关于拷贝文件的API接口说明,请参见CopyObject