LogoMkSaaS文档
LogoMkSaaS文档
首页

介绍

快速入门什么是 Fumadocs对比

设置

手动安装静态导出

写作

Markdown国际化

UI

概览主题搜索
组件
手风琴音频上传组件(AudioUploadDropzone)横幅代码块(动态)文件GitHub 信息可缩放图片内联目录根切换器步骤选项卡类型表格
MDX
组件

音频上传组件(AudioUploadDropzone)

专用于音频文件的拖拽上传组件。

使用示例

import { useState } from "react";
import { useTranslations } from "next-intl";
import { AudioUploadDropzone } from "@/components/music/audio-upload-dropzone";

export function AudioUploadExample() {
  const t = useTranslations();
  const [uploadUrl, setUploadUrl] = useState<string | null>(null);
  const [isUploading, setIsUploading] = useState(false);

  return (
    <AudioUploadDropzone
      labels={{
        title: t("Cover.uploadTrack"),
        placeholder: t("Cover.uploadPlaceholder"),
        uploading: t("Cover.uploading"),
        uploadSuccess: t("Cover.uploadSuccess"),
        uploadComplete: t("Cover.uploadComplete"),
        sizeLimit: (size) => t("Cover.uploadSizeLimit", { size }),
        tooLarge: (size) => t("Cover.uploadTooLarge", { size }),
        error: t("Cover.error"),
        deleteConfirm: {
          title: t("Cover.deleteConfirmTitle"),
          description: t("Cover.deleteConfirmDescription"),
          cancel: t("Cover.deleteConfirmCancel"),
          action: t("Cover.deleteConfirmAction"),
        },
      }}
      uploadUrl={uploadUrl}
      onUploadComplete={(url) => setUploadUrl(url)}
      onUploadClear={() => setUploadUrl(null)}
      onUploadingChange={setIsUploading}
      isInvalid={!uploadUrl}
      errorText={t("Cover.sourceRequired")}
      helperText={t("Cover.uploadLimit", { minutes: 8, model: "V5" })}
    />
  );
}

Props

  • labels: 文案集合,sizeLimit/tooLarge 为函数型文案。
  • uploadUrl: 当前已上传音频的 URL。
  • onUploadComplete: 上传成功回调,返回 URL。
  • onUploadClear: 用户清除已上传文件时回调。
  • onUploadingChange: 上传开始/结束时回调。
  • isInvalid: 是否显示错误态。
  • errorText: 错误文案(与 isInvalid 搭配)。
  • helperText: 额外辅助提示(如时长限制)。
  • maxFileSize: 最大文件大小(默认 MAX_AUDIO_FILE_SIZE)。
  • accept: 允许的文件类型(默认 audio/*)。
  • disabled: 禁用上传交互。

行为说明

  • 上传端点:/api/storage/upload-audio。
  • 大小校验:默认使用 MAX_AUDIO_FILE_SIZE,上传前校验。
  • 删除行为:只清除本地状态,不删除远端存储文件。
  • 仅限音频:不要用于非音频上传场景。

手风琴

在文档中添加手风琴组件

横幅

在您的网站添加横幅

目录

使用示例
Props
行为说明