直击前端：JS直传OSS文件，进度条一目了然！

2023-10-13 12:02:35

前端直击OSS，文件上传一触即发！

在现代前端应用中，文件上传是再常见不过的操作了。从图片、视频到文档，各种类型的文件需要被安全、快速地上传到服务器。而阿里云OSS（Object Storage Service）凭借其高可靠性、高性价比和全球部署等优势，成为众多开发者的首选。

本文将深入浅出地讲解如何使用前端JavaScript（JS）直接上传文件到阿里云OSS，并提供进度条功能，让上传过程一目了然。

一、直达核心：上传流程分解

OSS上传文件的核心流程可以分解为以下几步：

获取上传凭证：向OSS服务器发起请求，获取临时访问凭证（STS）。
初始化OSS客户端：使用OSS SDK初始化OSS客户端，并配置相关参数。
上传文件：使用OSS客户端将本地文件上传到OSS。
获取文件URL：上传完成后，获取上传文件的URL，以便后续使用。

二、代码实现：实战出真知

接下来，我们将使用JS代码演示如何实现上述流程。

1. 获取上传凭证

const stsUrl = 'https://sts.aliyuncs.com/v2/credentials';
const params = {
  Action: 'AssumeRole',
  RoleArn: 'acs:ram::123456789012:role/oss-assume-role',
  RoleSessionName: 'my-session-name',
};

const stsResponse = await fetch(stsUrl, {
  method: 'POST',
  body: JSON.stringify(params),
});
const stsData = await stsResponse.json();

2. 初始化OSS客户端

const ossClient = new OSS({
  accessKeyId: stsData.Credentials.AccessKeyId,
  accessKeySecret: stsData.Credentials.AccessKeySecret,
  stsToken: stsData.Credentials.SecurityToken,
  endpoint: 'oss-cn-hangzhou.aliyuncs.com',
  bucket: 'my-bucket',
});

3. 上传文件

const file = document.getElementById('file-input').files[0];
const objectName = 'path/to/file.ext';

const uploadTask = ossClient.multipartUpload(objectName, file, {
  progress: (p) => {
    // 显示上传进度
    const progressBar = document.getElementById('progress-bar');
    progressBar.style.width = `${p * 100}%`;
  },
});

await uploadTask;

4. 获取文件URL

const fileUrl = ossClient.signatureUrl(objectName, {
  expires: 3600, // URL有效期为1小时
});

三、温馨提示：注意事项和常见问题

注意：您需要在OSS控制台中创建Bucket，并将Bucket的访问权限设置为“公共读”。
若遇到“SecurityError: Blocked a frame with origin ... from accessing a cross-origin frame.”错误，请确保您在服务器端设置了跨域访问控制（CORS）。
常见问题：
- 上传文件失败：请检查您的OSS凭证是否正确，并确保您已在OSS控制台中授权您的Bucket。
- 上传进度条不显示：请检查您的代码是否正确实现了上传进度回调函数。