音频上传组件(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,上传前校验。 - 删除行为:只清除本地状态,不删除远端存储文件。
- 仅限音频:不要用于非音频上传场景。
MkSaaS文档