feat: add sample about cname's usage (#453)

feat: add sample about cname's usage
ali-sdk · Apr 23, 2018 · 54db574 · 54db574
1 parent 8714425
commit 54db574
Show file tree

Hide file tree

Showing 2 changed files with 60 additions and 4 deletions.
diff --git a/example/index.html b/example/index.html
@@ -62,6 +62,7 @@ <h1>OSS <small>in</small> Browser</h1>
  <div class="form-group">
  <label>Store as</label>
  <input type="text" class="form-control" id="object-key-content" value="object" />
+ </div>
  <div class="form-group">
  <input type="button" class="btn btn-primary" id="content-button" value="Save" />
  </div>
@@ -183,6 +184,25 @@ <h1>OSS <small>in</small> Browser</h1>
  </div>
  </div>
  </td>
+ <td>
+ <div class="panel panel-success">
+ <div class="panel-heading">Custom Domain Usage</div>
+ <div class="panel-body">
+ <form action="" class="form-horizontal">
+ <div class="form-group">
+ <input type="text" class="form-control" id="key-cname" placeholder="Please Input Cname!" />
+ <label>object name to download</label>
+ <input type="text" class="form-control" id="key-cname-objectName" value="cnameObject" />
+ <div>
+ <input type="button" class="btn btn-primary" id="key-cname-button" value="Save" />
+ </div>
+ </div>
+ </form>
+ </div>
+ </div>
+ </td>
+ </tr>
+ <tr>
  <td colspan="2">
  Powered by
  <a href="https://www.aliyun.com/product/oss">OSS</a> &

diff --git a/example/index.js b/example/index.js
@@ -108,7 +108,7 @@ const base64progress = function (p) {
  * @param filename set up a meaningful suffix, or you can set mime type in options
  * @returns {File|*}
  */
-function dataURLtoFile(dataurl, filename) {
+const dataURLtoFile = function dataURLtoFile(dataurl, filename) {
  const arr = dataurl.split(',');
  const mime = arr[0].match(/:(.*?);/)[1];
  const bstr = atob(arr[1]);
@@ -118,10 +118,9 @@ function dataURLtoFile(dataurl, filename) {
  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 });
-}
-
+};
 
-const uploadBase64Img = function (client) {
+const uploadBase64Img = function uploadBase64Img(client) {
  const base64Content = document.getElementById('base64-file-content').value.trim();
  const key = document.getElementById('base64-object-key-file').value.trim() || 'object';
  if (base64Content.indexOf('data:image') === 0) {
@@ -226,6 +225,38 @@ const downloadFile = function (client) {
  return result;
 };
 
+const cnameUsage = function (cname) {
+ if (!cname) {
+ alert('请输入cname!');
+ return;
+ }
+ const url = appServer;
+ $.ajax({
+ url,
+ }).then((result) => {
+ const creds = result;
+ const client = new OSS.Wrapper({
+ accessKeyId: creds.AccessKeyId,
+ accessKeySecret: creds.AccessKeySecret,
+ stsToken: creds.SecurityToken,
+ endpoint: cname,
+ cname: true,
+ region,
+ bucket,
+ });
+
+ const filename = document.getElementById('key-cname-objectName').value.trim();
+ console.log(filename);
+
+ const res = client.signatureUrl(filename, {
+ response: {
+ 'content-disposition': `attachment; filename="${filename}"`,
+ },
+ });
+ window.location = res;
+ });
+};
+
 window.onload = function () {
  document.getElementById('file-button').onclick = function () {
  if (uploadFileClient) {
@@ -265,5 +296,10 @@ window.onload = function () {
  applyTokenDo(uploadBase64Img);
  };
 
+ document.getElementById('key-cname-button').onclick = function () {
+ const cname = document.getElementById('key-cname').value;
+ cnameUsage(cname);
+ };
+
  applyTokenDo(listFiles);
 };