<Alert
                message={$t('支持%s，音頻大小需為%d以內(nèi)，音頻采樣率為%e')
                    .replace('%s', AUDIO_TYPES.join())
                    .replace('%d', `${AUDIO_MAX_SIZE}KB`)
                    .replace('%e', '16K')}
                type='info'
                showIcon
                style={{ width: '50%', marginBottom: 16 }}
            />

<AudioUpload>
    <Button icon={<UploadOutlined />}>上傳</Button>
</AudioUpload>

const AudioUpload = props => {
    const { children } = props;
    
    return (
        <Upload>
            {children}  {/* 自定義上傳按鈕 */}
        </Upload>
    );
};

// 不是事件冒泡，而是組件嵌套關(guān)系
<Upload>           {/* 父組件 */}
    <Button>       {/* 子組件 */}
        上傳
    </Button>
</Upload>

// 用戶點(diǎn)擊這個(gè)按鈕
<Button icon={<UploadOutlined />}>
    {$t('com.Upload')}
</Button>

// Upload 組件內(nèi)部自動(dòng)執(zhí)行
const hiddenInput = document.querySelector('input[type="file"]');
hiddenInput.click(); // 觸發(fā)文件選擇對(duì)話框

// Upload 組件內(nèi)部的偽代碼邏輯
class Upload extends React.Component {
    componentDidMount() {
        // 監(jiān)聽(tīng)整個(gè)上傳區(qū)域的點(diǎn)擊事件
        this.uploadArea.addEventListener('click', (e) => {
            // 檢查點(diǎn)擊的是否是子元素
            if (e.target.closest('.ant-upload-select-button')) {
                // 觸發(fā)文件選擇
                this.triggerFileSelect();
            }
        });
    }
    
    triggerFileSelect() {
        // 顯示文件選擇對(duì)話框
        this.fileInput.click();
    }
}

<Upload>
    {children}  {/* 這里需要一個(gè)可點(diǎn)擊的元素來(lái)觸發(fā)文件選擇 */}
</Upload>

// 如果 Upload 組件沒(méi)有 children
<Upload>
    {/* 空的，沒(méi)有可點(diǎn)擊的元素 */}
</Upload>

// 結(jié)果：用戶無(wú)法點(diǎn)擊任何地方來(lái)觸發(fā)文件選擇
// Upload 組件不知道應(yīng)該監(jiān)聽(tīng)哪個(gè)元素的點(diǎn)擊事件

<Upload
            name='file'
            headers={}
            action={file =>
                Promise.resolve(
           			 `地址 ${file.name}`
                )
            }
            accept={AUDIO_TYPES.map(item => `.${item}`).join()}
            showUploadList={false}
            beforeUpload={beforeUpload}
            onSuccess={refresh}>
            {children}
        </Upload>

// 服務(wù)器端會(huì)這樣獲取文件
const uploadedFile = req.files.file;  // 通過(guò) 'file' 字段名獲取

// 根據(jù)文件類型命名
name='audio'           // 音頻文件
name='image'           // 圖片文件
name='document'        // 文檔文件
name='video'           // 視頻文件

// 根據(jù)業(yè)務(wù)功能命名
name='profile-picture' // 頭像
name='background-music' // 背景音樂(lè)
name='notification-sound' // 通知音效

// 認(rèn)證相關(guān)
headers={{
    'Authorization': 'Bearer ' + token,
    'X-API-Key': apiKey,
    'User-Token': userToken
}}

// 跨域相關(guān)
headers={{
    'Access-Control-Allow-Origin': '*',
    'Content-Type': 'multipart/form-data'
}}

// 自定義標(biāo)識(shí)
headers={{
    'X-Request-ID': generateRequestId(),
    'X-Client-Version': '1.0.0',
    'X-Platform': 'web'
}}

// 業(yè)務(wù)相關(guān)
headers={{
    'Device-Id': deviceId,
    'Session-Id': sessionId,
    'Request-Source': 'audio-upload'
}}

// 最簡(jiǎn)單的配置
<Upload action="/api/upload">
    <Button>上傳</Button>
</Upload>

// 完整的 URL
<Upload action="https://api.example.com/upload">
    <Button>上傳</Button>
</Upload>

// 根據(jù)文件信息動(dòng)態(tài)構(gòu)建
action={file => `/upload/${file.name}`}

// 根據(jù)環(huán)境動(dòng)態(tài)選擇
action={file => 
    process.env.NODE_ENV === 'production' 
        ? 'https://api.prod.com/upload' 
        : 'http://localhost:3000/upload'
}

// 根據(jù)文件類型動(dòng)態(tài)選擇
action={file => {
    if (file.type.startsWith('audio/')) {
        return '/api/upload/audio';
    }
    if (file.type.startsWith('image/')) {
        return '/api/upload/image';
    }
    return '/api/upload/file';
}}

// 1. 用戶選擇文件
// 2. beforeUpload 驗(yàn)證通過(guò)
// 3. action 函數(shù)被調(diào)用，獲取上傳地址
// 4. 向該地址發(fā)送文件數(shù)據(jù)
// 5. 觸發(fā) onSuccess 或 onError 回調(diào)

// Ant Design Upload 組件期望 action 返回一個(gè) Promise
// 即使我們返回的是同步的字符串，也需要包裝成 Promise

// 正確的方式
action={file => Promise.resolve(uploadUrl)}

// 也可以這樣寫
action={file => new Promise(resolve => resolve(uploadUrl))}

// 或者使用 async/await
action={async file => uploadUrl}

// 在 action 中判斷文件大小，大文件走分塊上傳
action={file => {
    if (file.size > 10 * 1024 * 1024) { // 大于10MB
        // 分塊上傳
        return '/api/upload/chunk';
    } else {
        // 普通上傳
        return '/api/upload/normal';
    }
}}

const AudioUpload = props => {
    const [isChunked, setIsChunked] = useState(false);
    
    const handleChunkedUpload = async (file) => {
        // 分塊上傳邏輯
        const chunkSize = 1024 * 1024; // 1MB每塊
        const totalChunks = Math.ceil(file.size / chunkSize);
        
        for (let i = 0; i < totalChunks; i++) {
            const chunk = file.slice(i * chunkSize, (i + 1) * chunkSize);
            const formData = new FormData();
            formData.append('chunk', chunk);
            formData.append('chunkIndex', i);
            formData.append('totalChunks', totalChunks);
            
            await fetch('/api/upload/chunk', {
                method: 'POST',
                body: formData
            });
        }
        
        // 合并文件
        await fetch('/api/upload/merge', {
            method: 'POST',
            body: JSON.stringify({ fileName: file.name, totalChunks })
        });
    };

    const beforeUpload = file => {
        // 大文件使用分塊上傳
        if (file.size > 10 * 1024 * 1024) {
            setIsChunked(true);
            handleChunkedUpload(file);
            return false; // 阻止默認(rèn)上傳
        }
        return true; // 小文件正常上傳
    };

    return (
        <Upload
            action={file => {
                if (isChunked) {
                    return '/api/upload/chunk'; // 分塊上傳地址
                }
                // 原有的上傳地址
                return `地址+${file.name}`;
            }}
            beforeUpload={beforeUpload}
            onSuccess={refresh}>
            {children}
        </Upload>
    );
};

<Upload
    accept={AUDIO_TYPES.map(item => `.${item}`).join()}  // 只顯示 .MP3 文件
    // ...
>

const beforeUpload = file => {
    const { name, size } = file;  // 從 File 對(duì)象獲取文件信息
    
    // 執(zhí)行各種驗(yàn)證...
    
    // 返回 false 阻止上傳，返回 true 允許上傳
};

{playUid !== record.uid ? (
                                    <Icon
                                        type='play3'
                                        className='audio-btn'
                                        onClick={() => handlePlayAudio(record)}
                                    />
                                ) : (
                                    <Icon
                                        type='pause2'
                                        className='audio-btn'
                                        onClick={() => handlePauseAudio()}
                                    />
                                )}

const [playUid, setPlayUid] = useState(-1);

const handlePlayAudio = record => {
    // 1. 提取音頻信息
    const { uid, url } = record;
    
    // 2. 設(shè)置播放狀態(tài)
    setPlayUid(uid);
    
    // 3. 獲取環(huán)境配置
    const urlParamsString = localStorage.getItem('_urlParams');
    const urlParams = urlParamsString ? JSON.parse(urlParamsString) : {};
    const { Prefix, UserToken, DeviceId } = urlParams;
    
    // 4. 構(gòu)建文件加載地址
    const preFix = 地址;
    
    // 5. 先停止上一個(gè)音頻
    if (lastAudio.current) {
        lastAudio.current.pause();
    }
    
    // 6. 根據(jù)部署模式選擇播放方式
    if (CLOUDWEB) {
        // 云端模式：先下載再播放
        // ...
    } else {
        // 本地模式：直接播放
        // ...
    }
};

else {
    // 直接使用文件路徑創(chuàng)建音頻對(duì)象
    lastAudio.current = new Audio(preFix + url);
    
    // 開(kāi)始播放
    lastAudio.current.play();
    
    // 設(shè)置播放結(jié)束和錯(cuò)誤處理
    lastAudio.current.onended = () => {
        setPlayUid(-1);
    };
    lastAudio.current.onerror = () => {
        setPlayUid(-1);
    };
}

const handlePauseAudio = () => {
    // 1. 暫停音頻播放
    if (lastAudio.current) {
        lastAudio.current.pause();
    }
    
    // 2. 重置播放狀態(tài)
    setPlayUid(-1);
};

const file = {
    name: 'audio.mp3',           // 文件名
    size: 51200,                 // 文件大小（字節(jié)）
    type: 'audio/mpeg',          // MIME類型
    lastModified: 1234567890,    // 最后修改時(shí)間
    // 文件的實(shí)際二進(jìn)制內(nèi)容存儲(chǔ)在內(nèi)存中，但前端不直接讀取
};

<Upload
    name='file'                    // 表單字段名
    action={file => Promise.resolve(uploadUrl)}  // 上傳地址
    // ...
/>

// 服務(wù)器端接收到的數(shù)據(jù)格式：
// Content-Type: multipart/form-data
// 
// --boundary
// Content-Disposition: form-data; name="file"; filename="audio.mp3"
// Content-Type: audio/mpeg
// 
// [二進(jìn)制音頻文件內(nèi)容]
// --boundary--