JavaScript中的前端搭建七牛/阿里oss上传服务

在 Web 开发中，我们经常需要将用户上传的文件存储到云存储服务。七牛云存储和阿里云对象存储（OSS）是两个常用的云存储服务，它们提供了强大的文件存储和管理功能。

本篇博客将介绍如何在前端使用 JavaScript 搭建七牛/阿里oss上传服务。

准备工作

在开始实现之前，我们需要进行一些准备工作。

首先，我们需要一个七牛或阿里云的账号，并创建一个存储空间（Bucket）。获取七牛的 Access Key 和 Secret Key 或阿里云 OSS 的 AccessKeyId 和 AccessKeySecret。

接下来，我们需要引入相应的 JavaScript SDK。七牛云提供了 qiniu-js SDK，而阿里云 OSS 官方也提供了 ali-oss SDK。你可以在项目中使用 npm 安装这两个 SDK。

npm install qiniu-js ali-oss

搭建七牛上传服务

下面是一个简单的示例，展示了如何使用七牛云进行文件上传。

import qiniu from 'qiniu-js';

const ACCESS_KEY = 'your-access-key';
const SECRET_KEY = 'your-secret-key';
const BUCKET_NAME = 'your-bucket-name';

// 构建上传策略
function buildUploadOptions(file) {
  // 设置上传文件的 key（重命名文件名）
  const key = `${Date.now()}_${file.name}`;
  const putPolicy = {
    scope: BUCKET_NAME + ':' + key,
  };
  const mac = new qiniu.auth.digest.Mac(ACCESS_KEY, SECRET_KEY);
  const uploadToken = new qiniu.rs.PutPolicy(putPolicy).uploadToken(mac);
  
  return {
    token: uploadToken,
    key: key,
  };
}

// 上传文件到七牛云
function uploadToQiniu(file) {
  const options = buildUploadOptions(file);
  
  qiniu.upload(file, options.key, options.token).subscribe({
    next(res) {
      // 上传进度
      console.log(res.total.percent);
    },
    error(err) {
      // 上传错误
      console.log(err);
    },
    complete(res) {
      // 上传完成
      console.log(res);
    }
  });
}

在这个示例中，我们首先导入了 qiniu-js SDK，并定义了七牛云的 Access Key、Secret Key 和 Bucket Name。然后，我们构建了一个上传策略（putPolicy），其中包含了文件上传的目标路径和前缀。接着，我们使用 qiniu-js 的 upload 方法将文件上传到七牛云，并监听上传进度、错误和完成事件。

搭建阿里oss上传服务

接下来，我们来看如何使用阿里云 OSS 进行文件上传。

import OSS from 'ali-oss';

const ACCESS_KEY_ID = 'your-access-key-id';
const ACCESS_KEY_SECRET = 'your-access-key-secret';
const BUCKET_NAME = 'your-bucket-name';
const REGION = 'your-region';

// 初始化 OSS 客户端
const client = new OSS({
  region: REGION,
  accessKeyId: ACCESS_KEY_ID,
  accessKeySecret: ACCESS_KEY_SECRET,
  bucket: BUCKET_NAME,
});

// 上传文件到阿里云 OSS
async function uploadToAliOSS(file) {
  try {
    const result = await client.put(file.name, file);
    console.log(result);
  } catch (error) {
    console.log(error);
  }
}

首先，我们导入了 ali-oss SDK，并定义了阿里云 OSS 的 AccessKeyId、AccessKeySecret、Bucket Name 和 Region。然后，我们通过 new OSS 初始化一个阿里云 OSS 的客户端实例。接着，我们使用 client.put 方法将文件上传到阿里云 OSS，并监听上传结果。

总结

本篇博客介绍了如何在前端使用 JavaScript 搭建七牛/阿里oss上传服务。通过使用七牛云和阿里云 OSS 的 SDK，我们可以轻松地实现文件的上传功能，并提供给用户更好的文件存储和管理体验。

如果你有任何问题或建议，请在下方留言，我会尽快回复。谢谢阅读！

本文来自极简博客，作者：天空之翼，转载请注明原文链接：JavaScript中的前端搭建七牛/阿里oss上传服务