使用Nuxt 实现腾讯云音频上传文档

腾讯云音频上传文档

概述

本文档介绍了如何使用腾讯云的 COS (Cloud Object Storage) SDK 在 Vue.js 项目中实现音频文件的上传。我们将使用 cos-js-sdk-v5 库来创建一个客户端，并通过调用腾讯云的 API 实现文件上传。

安装依赖

确保在项目中安装了 cos-js-sdk-v5 以及其他必要的依赖：

npm install cos-js-sdk-v5

代码实现

1. 创建 COS 客户端

首先，我们需要创建一个单例的 COS 客户端，以便在整个应用程序中重复使用。以下是创建客户端的代码：

import COS from "cos-js-sdk-v5";
import decryptData from "@/utils/decryptData";

let TencentClient: COS | undefined;
const createCOSFn = async (): Promise<[boolean, COS | null]> => {
  try {
    if (TencentClient) {
      return [true, TencentClient];
    }

    const cos = new COS({
      Protocol: "https:",
      getAuthorization: function (options, callback) {
        httpGet("xxx", {}).then(
          (res) => {
            if (res.status === 0) {
              const decryptedData = decryptData(res.data);
              callback({
                TmpSecretId: decryptedData.xxx,
                TmpSecretKey: decryptedData.xxx,
                SecurityToken: decryptedData.xxx,
                StartTime: decryptedData.xxx,
                ExpiredTime: decryptedData.xxx,
              });
            } else {
              return [false, null];
            }
          }
        );
      },
    });

    TencentClient = cos;
    return [true, cos];
  } catch (error) {
    return [false, null];
  }
};

2. 生成随机字符串

为了确保上传文件的唯一性，我们将创建一个函数来生成随机字符串：

const generateRandomString = (length: number) => {
  const characters = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
  let result = "";
  const charactersLength = characters.length;
  for (let i = 0; i < length; i++) {
    result += characters.charAt(Math.floor(Math.random() * charactersLength));
  }
  return result;
};

3. 上传音频文件

现在，我们可以实现文件上传的功能。以下是 uploadAudio 函数的实现，它接受一个文件和一个 UUID，负责将文件上传到腾讯云：

export const uploadAudio = async (file: File, uuid: string): Promise<any> => {
  const valuesStore = useValuesStore();
  const [isSuccess, _] = await createCOSFn();

  let hexString = `${uuid}_${generateRandomString(32)}_${Date.now()}`;

  if (!isSuccess) {
    return;
  }

  try {
    const params: COS.UploadFileParams = {
      Bucket: "xxx",
      Region: "xxx",
      Key: `${hexString}.wav`,
      StorageClass: "xxx",
      Body: file,
      SliceSize: 1024 * 512,
      AsyncLimit: 6,
      onProgress: function (p: any) {
        const percent = `${Math.ceil(p.percent * 10000) / 100}%`;
        const percentVal = Math.ceil(p.percent * 10000) / 100;
        valuesStore.setPercent(String(percentVal));

        message.loading({
          content: percentVal === 100 ? "In hand..." : percent,
          key: "loading",
          duration: 0,
        });
      },
      onTaskReady: function (id) {
        taskId = id;
      },
    };
    return new Promise((resolve, reject) => {
      TencentClient?.sliceUploadFile(params, (err, data) => {
        if (err) {
          resolve({ success: false, error: err });
        } else {
          if (data.statusCode === 200) {
            message.destroy();
            resolve(`https://${data.Location}`);
          } else {
            resolve({ success: false, error: data });
          }
        }
      });
    });
  } catch (error) {
    throw error;
  }
};

关键参数说明

• Bucket: 存储桶的名称，必须确保该桶存在。
• Region: 腾讯云的地域信息，如 ap-singapore。
• Key: 文件的存储名称，建议使用唯一值以避免文件冲突。
• Body: 需要上传的文件对象。
• SliceSize: 分块上传的阈值，通常设置为 512 KB。
• AsyncLimit: 同时上传的文件块数限制。

结论

通过上述代码，我们可以轻松地将音频文件上传到腾讯云存储。您可以根据实际需求进行调整，例如修改上传文件的大小限制或添加其他文件类型的支持。

希望这篇文档能帮助您顺利实现音频上传功能！如果您有任何问题，请随时联系支持团队。