OSS 前端直传攻略：新手必读，让你秒懂！

2023-09-26 20:04:32

引言

对象存储 OSS 是阿里云提供的海量、安全、低成本、高可靠的云存储服务。它的前端直传功能，可以让开发者直接在前端完成文件上传，无需经过后端中转，极大地简化了开发流程。本文将为你详细讲解 OSS 前端直传的原理、配置和注意事项，让你彻底掌握这一便捷高效的文件上传方式。

一、OSS 前端直传原理

OSS 前端直传的原理很简单：

前端通过 HTML 表单或 JS SDK 向 OSS 服务器发送上传请求。
OSS 服务器验证请求的合法性，并返回一个授权凭证。
前端使用授权凭证直接向 OSS 服务器上传文件。

二、前后端准备工作

1. 前端

安装 OSS JavaScript SDK。
获得 OSS 访问密钥（Access Key ID 和 Access Key Secret）。

2. 后端

创建 OSS Bucket 并配置 CORS 规则（具体方法见后文）。
生成上传凭证并返回给前端。

三、CORS 配置

CORS（跨域资源共享）是浏览器的一种安全机制，它限制了不同域之间的资源访问。OSS 前端直传需要跨域访问 OSS 服务器，因此需要配置 CORS 规则。

配置方法如下：

登录阿里云控制台，进入 OSS 管理界面。
选择要配置的 Bucket。
在「基本设置」标签页，点击「跨域设置」。
配置允许跨域访问的源域名、请求方法、请求头和响应头。

四、上传成功回调

上传成功回调是一种机制，可以让开发者在文件上传成功后执行自定义操作。OSS 前端直传支持通过回调 URL 触发自定义回调函数。

配置方法如下：

在 OSS 管理界面中，为 Bucket 配置回调规则。
设置回调 URL 为你自定义的函数 URL。

五、示例代码

1. 前端（JS）

const OSS = require('ali-oss');

const client = new OSS({
  region: 'your-region',
  accessKeyId: 'your-access-key-id',
  accessKeySecret: 'your-access-key-secret',
  bucket: 'your-bucket-name'
});

const uploadButton = document.getElementById('upload-button');
uploadButton.addEventListener('click', () => {
  const file = document.getElementById('file-input').files[0];
  client.put(file.name, file)
    .then((res) => {
      console.log(`上传成功：${res.url}`);
    })
    .catch((err) => {
      console.log(`上传失败：${err}`);
    });
});

2. 后端（Node.js）

const OSS = require('ali-oss');

const client = new OSS({
  region: 'your-region',
  accessKeyId: 'your-access-key-id',
  accessKeySecret: 'your-access-key-secret'
});

const generateUploadToken = async (bucketName, fileName) => {
  const policy = await client.generatePostPolicy(bucketName, fileName, {
    expireTime: 60
  });
  return {
    accessKeyId: client.accessKeyId,
    accessKeySecret: client.accessKeySecret,
    bucketName: bucketName,
    dir: fileName,
    expire: policy.expire,
    host: client.host,
    signature: policy.signature,
    policy: policy.encodedPolicy
  };
};