Applications navigateur pour Object Storage Service (OSS) - Object Storage Service

Cette rubrique décrit les cas d'utilisation du SDK dans un navigateur.

Prérequis

Configurez les règles CORS pour le bucket. Pour plus d'informations, consultez la section Préparatifs.
Déployez un serveur Security Token Service (STS) et obtenez des informations d'autorisation temporaires depuis le client. Pour plus d'informations, consultez la section Déployer un serveur STS et obtenir des informations d'autorisation temporaires depuis le client.

Navigateurs pris en charge

Le SDK Browser.js prend en charge les versions de navigateurs suivantes :

IE 10 ou version ultérieure, et Edge
Important
- Importez une bibliothèque de promesses avant d'utiliser le SDK Browser.js avec IE.
- Le SDK Browser.js utilise l'API File pour les opérations sur les fichiers, ce qui peut entraîner des problèmes avec les anciennes versions des navigateurs. Utilisez des plug-ins tiers pour appeler les API OSS afin de télécharger et téléverser des fichiers. Pour un exemple, consultez la section Pratiques de téléversement direct basé sur le web.
Versions grand public de Chrome, Firefox et Safari
Navigateurs par défaut des versions grand public d'Android, iOS et Windows Phone

Téléverser un fichier depuis un navigateur

L'exemple de code suivant montre comment téléverser un fichier depuis un navigateur. Il utilise les styles Bootstrap.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <link
      rel="stylesheet"
      href="https://cdn.bootcss.com/twitter-bootstrap/2.3.2/css/bootstrap.min.css"
    />
    <style>
      .form-group {
        margin: 10px;
      }
    </style>
  </head>

  <body style="padding: 100px">
    <div class="form-group">
      <!-- // Select the file to upload. -->
      <label>Select file</label>
      <input type="file" id="file" />
    </div>
    <div class="form-group">
      <!-- // Specify the name of the file to upload to OSS. -->
      <label>Store as</label>
      <input type="text" class="form-control" id="object-key-file" value="" />
    </div>
    <div class="form-group">
      <!-- // Upload the file. -->
      <input
        type="button"
        class="btn btn-primary"
        id="file-button"
        value="Upload"
      />
    </div>
    <div class="form-group">
      <!-- // Show the upload progress. -->
      <div class="progress">
        <div
          id="progress-bar"
          class="progress-bar"
          role="progressbar"
          aria-valuenow="0"
          aria-valuemin="0"
          aria-valuemax="100"
          style="min-width: 2em"
        >
          0%
        </div>
      </div>
    </div>
    <!--Import the SDK file.-->
    <script
      type="text/javascript"
      src="https://gosspublic.alicdn.com/aliyun-oss-sdk-6.18.0.min.js"
    ></script>
    <script type="text/javascript">
      // Specify the URL of your authorization server. For example, http://127.0.0.1:8000/sts.
      const appServer = "yourStsServer";
      // Specify the bucket name. For example, examplebucket.
      const bucket = "examplebucket";
      // Specify the region where the bucket is located. For example, if the bucket is in the China (Hangzhou) region, set the region to oss-cn-hangzhou.
      const region = "oss-cn-hangzhou";

      const urllib = OSS.urllib;

      const applyTokenDo = function (func) {
        const url = appServer;
        return urllib
          .request(url, {
            method: "GET",
          })
          .then(function (result) {
            const creds = JSON.parse(result.data);
            // Create an OSS client using the temporary access credentials.
            const client = new OSS({
             // Set yourRegion to the region where the bucket is located. For example, if the bucket is in the China (Hangzhou) region, set yourRegion to oss-cn-hangzhou.
              region: region,
              authorizationV4: true,
              accessKeyId: creds.AccessKeyId,
              accessKeySecret: creds.AccessKeySecret,
              stsToken: creds.SecurityToken,
              bucket: bucket,
            });

            return func(client);
          });
      };

      let currentCheckpoint;
      const progress = async function progress(p, checkpoint) {
        currentCheckpoint = checkpoint;
        const bar = document.getElementById("progress-bar");
        bar.style.width = `${Math.floor(p * 100)}%`;
        bar.innerHTML = `${Math.floor(p * 100)}%`;
      };

      let uploadFileClient;
      const uploadFile = function (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}`);
        // Use multipartUpload to upload the selected file and use the progress parameter to set the progress bar.
        const options = {
          progress,
          partSize: 100 * 1024,
          meta: {
            year: 2017,
            people: "test",
          },
        };

        return client
          .multipartUpload(key, file, options)
          .then((res) => {
            console.log("upload success: %j", res);
            currentCheckpoint = null;
            uploadFileClient = null;
          })
          .catch((err) => {
            if (uploadFileClient && uploadFileClient.isCancel()) {
              console.log("stop-upload!");
            } else {
              console.error(err);
            }
          });
      };

      window.onload = function () {
        document.getElementById("file-button").onclick = function () {
          applyTokenDo(uploadFile);
        };
      };
    </script>
  </body>
</html>

Références

Pour consulter l'exemple de code complet relatif aux applications navigateur, rendez-vous sur l'exemple GitHub .