AI 助理
备案控制台
文档
输入文档关键字查找
首页 云开发平台 （文档停止维护） 场景与解决方案 OSS文件浏览器直传方案

OSS文件浏览器直传方案

更新时间：
我的收藏

依赖准备

  • 在云开发平台应用中设置如下环境变量
    1. AKID=安全受限的 Access key ID
    2. AKSK=Access key secret
    3. REGION=OSS 所在的 Region
    4. OSSBUCKET=Bucket 名称
    5. OSSDIR=上传目录
    image.png

  • OSS操作子账号授权策略

    1. {
    2.   "Version": "1",
    3.   "Statement": [
    4.       {
    5.           "Effect": "Allow",
    6.           "Action": "oss:*",
    7.           "Resource": [
    8.               "acs:oss:*:*:你的OSS Bucket名称",
    9.               "acs:oss:*:*:你的OSS Bucket名称/*"
    10.           ]
    11.       }
    12.   ]
    13. }

  • OSS设置跨域访问

    • 打开自己的 OSS Bucket 概览页，在「基础设置」中找到「跨域访问」跨域设置

    • 点击「设置」，参考下图输入您自己允许跨域上传的域名，提交即可oss跨域设置

NodeJS 版本

在云开发平台应用中创建 /api/osstoken.js

  1. const crypto = require("crypto");
  2. const config = {
  3.     dir: process.env['OSSDIR'], // 上传目录
  4.     bucket: process.env['OSSBUCKET'],// Bucket 名称
  5.     region: process.env['REGION'],// OSS 所在的 Region
  6.     accessKeyId: process.env['AKID'],// 安全受限的 Access key ID
  7.     accessKeySecret: process.env['AKSK'],// Access key secret
  8.     expAfter: 3600000, // 签名失效时间，毫秒
  9.     maxSize: 1048576000 // 文件最大尺寸
  10. };
  11. module.exports.handler = function(event, context, callback) {
  12.   var host = `https://${config.bucket}.oss-${config.region}.aliyuncs.com`;
  13.   var expireTime = new Date().getTime() + config.expAfter;
  14.   var expiration = new Date(expireTime).toISOString();
  15.   var policyString = JSON.stringify({
  16.       'expiration': expiration,
  17.       'conditions': [
  18.           ['content-length-range', 0, config.maxSize],
  19.           ['starts-with', '$key', config.dir]
  20.       ]
  21.   });
  22.   var policy = Buffer.from(policyString).toString('base64');
  23.   var signature = crypto.createHmac('sha1', config.accessKeySecret).update(policy).digest("base64");
  24.   var tokenData = {
  25.       'signature': signature,
  26.       'policy': policy,
  27.       'host': host,
  28.       'accessid': config.accessKeyId,
  29.       'expire': expireTime,
  30.       'dir': config.dir
  31.   };
  32.   var responseObject = {
  33.       isBase64Encoded: true,
  34.       statusCode: 200,
  35.       headers: {
  36.         "Content-type": "application/json; charset=utf-8"
  37.       },
  38.       body: Buffer.from(JSON.stringify(tokenData)).toString("base64")
  39.   };
  40.   callback(null, responseObject);
  41. };

Python 版本

在云开发平台应用中创建 /api/osstoken.py

  1. # -*- coding: UTF-8 -*-
  2. import os
  3. import base64
  4. import time
  5. import datetime
  6. import json
  7. import hmac
  8. from hashlib import sha1 as sha
  10. access_key_id = os.environ['AKID']
  11. access_key_secret = os.environ['AKSK']
  12. host = 'http://{}.oss-{}.aliyuncs.com'.format(os.environ['OSSBUCKET'], os.environ['REGION'])
  13. upload_dir = os.environ['OSSDIR']
  14. expire_time = 3600 # 单位秒
  16. def get_iso_8601(expire):
  17.     gmt = datetime.datetime.utcfromtimestamp(expire).isoformat()
  18.     gmt += 'Z'
  19.     return gmt
  21. def get_token():
  22.     now = int(time.time())
  23.     expire_syncpoint = now + expire_time
  24.     expire = get_iso_8601(expire_syncpoint)
  26.     policy_dict = {}
  27.     policy_dict['expiration'] = expire
  28.     condition_array = []
  29.     array_item = []
  30.     array_item.append('starts-with')
  31.     array_item.append('$key')
  32.     array_item.append(upload_dir)
  33.     condition_array.append(array_item)
  34.     policy_dict['conditions'] = condition_array
  35.     policy = json.dumps(policy_dict).strip()
  36.     policy_encode = base64.b64encode(policy.encode())
  37.     h = hmac.new(access_key_secret.encode(), policy_encode, sha)
  38.     sign_result = base64.encodestring(h.digest()).strip()
  40.     token_dict = {}
  41.     token_dict['accessid'] = access_key_id
  42.     token_dict['host'] = host
  43.     token_dict['policy'] = policy_encode.decode()
  44.     token_dict['signature'] = sign_result.decode()
  45.     token_dict['expire'] = expire_syncpoint
  46.     token_dict['dir'] = upload_dir
  47.     result = json.dumps(token_dict)
  48.     return result
  50. def handler(event, context):
  51.   token = get_token()
  52.   api_rep = {
  53.     "isBase64Encoded":"true",
  54.     "statusCode":"200",
  55.     "headers":{"Content-Type":"application/json; charset=utf-8"},
  56.     "body":str(base64.b64encode(token.encode("utf-8")),"utf-8")
  57.   }
  58.   return api_rep

PHP版本

在云开发平台应用中创建 /api/osstoken.php

  1. <?php
  2. function handler($event, $context) {
  3.   $config = array(
  4.     'dir' => getenv('OSSDIR'), // 上传目录
  5.     'bucket' => getenv('OSSBUCKET'),// Bucket 名称
  6.     'region' => getenv('REGION'),// OSS 所在的 Region
  7.     'accessKeyId' => getenv('AKID'),// 安全受限的 Access key ID
  8.     'accessKeySecret' => getenv('AKSK'),// Access key secret
  9.     'expAfter' => 3600, // 签名失效时间，秒
  10.     'maxSize' => 1048576000 // 文件最大尺寸
  11.   );
  12.   $host = 'https://' . $config['bucket'] . '.oss-' . $config['region'] . '.aliyuncs.com';
  13.   $now = strtotime('now');
  14.   $expireTime = $now + $config['expAfter'];
  15.   $expiration = gmdate('Y-m-d\TH:i:s\Z', $expireTime);
  17.   $policy = array(
  18.       "expiration" => $expiration,
  19.       "conditions" => array(
  20.           array("content-length-range", 0, $config['maxSize']),
  21.           array("starts-with", "\$key", $config['dir'])
  22.       )
  23.   );
  25.   $policyString = base64_encode(json_encode($policy));
  26.   $signature = base64_encode(hash_hmac('sha1', $policyString, $config['accessKeySecret'], true));
  28.   $tokenData = array(
  29.       "signature" => $signature,
  30.       "policy" => $policyString,
  31.       "host" => $host,
  32.       "accessid" => $config['accessKeyId'],
  33.       "expire" => $expireTime,
  34.       "dir" => $config['dir']
  35.   );
  37.   $responseObject = array(
  38.       "isBase64Encoded" => true,
  39.       "statusCode" => 200,
  40.       "headers" => array(
  41.           "Content-type" => "application/json; charset=utf-8"
  42.       ),
  43.       "body" => base64_encode(json_encode($tokenData))
  44.   );
  45.   return $responseObject;
  46. }
  47. ?>

浏览器端直传代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <title>OSS浏览器直传文件方案</title>
  6. </head>
  7. <body>
  8.   <fieldset style="margin-top: 30px;border-color:#e6e6e6;border-width:1px 0 0;">
  9.     <legend style="margin-left:20px;padding:0 10px;font-size:20px;font-weight:300;">OSS浏览器直传文件方案</legend>
  10.   </fieldset>
  11.   <blockquote style="margin 10px 0 0;padding:10px;border-width:1px 1px 1px 5px;border-color:#e6e6e6;border-style:solid;">
  12.     请选择图片：
  13.     <input id="inputFile" name="inputFile" type="file" style="height:38px;line-height:38px;padding:0 18px;background:#1E9FFF;color:#fff;font-size:14px;border-radius:2px;" />
  14.   </blockquote>
  15.   <blockquote style="margin 10px 0 0;padding:10px;border-width:1px 1px 1px 5px;border-color:#e6e6e6;border-style:solid;">
  16.     预览图：
  17.     <div><image id="ossImage" src="" height="300"></image></div>
  18.   </blockquote>
  20.   <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  21.   <script type="text/javascript">
  22.     $(document).ready(function() {
  23.       $("#inputFile").on('change', function(file) {
  24.         console.log($("#inputFile").get(0).files[0]);
  25.         var file = $("#inputFile").get(0).files[0];
  26.         $.post('/api/osstoken').then(function (res) {
  27.           console.log(res);
  28.           var policy = res;
  29.           var filename = (new Date().getTime()) + '_' + file.name
  30.           var formData = new FormData();
  31.           formData.append('Filename', filename);
  32.           formData.append(
  33.             'key',
  34.             policy.dir + '/' + filename
  35.           );
  36.           formData.append('OSSAccessKeyId', policy.accessid);
  37.           formData.append('policy', policy.policy);
  38.           formData.append('Signature', policy.signature);
  39.           formData.append('success_action_status', '200');
  40.           formData.append('file', file);
  42.           $.ajax({
  43.             url: policy.host,
  44.             type: 'post',
  45.             processData: false,
  46.             contentType: false,
  47.             data: formData,
  48.             success: function (res) {
  49.               console.log(res);
  50.               var imageUrl = policy.host + '/' + policy.dir + '/' + filename;
  51.               console.log(imageUrl);
  52.               $("#ossImage").attr('src', imageUrl);
  53.             }
  54.           })
  56.         });
  57.       })
  58.     });
  59.   </script>
  60. </body>
  61. </html>
上一篇：阿里云视觉智能服务下一篇：垃圾分类
文档推荐