React 文件上傳新玩法：Aliyun OSS 加持的智能上傳組件

文件上傳是前端開發中的“老朋友”，但如何讓它既簡單又強大，還能無縫對接云端存儲？今天，我要帶你認識一個超酷的 React 組件 AliUploader，它不僅支持拖拽上傳、批量編輯和文件排序，還直接把文件傳到 Aliyun OSS（阿里云對象存儲服務），返回云端鏈接供你隨時調用。我們會拆解它的代碼，優化它的邏輯，再通過一個“項目文件上傳器” Demo 展示它的實力。準備好了嗎？讓我們一起把文件上傳玩出云端新高度吧！

組件的核心功能：上傳到云端

AliUploader 的任務是讓文件管理變得簡單又高效：

OSS 直傳：文件上傳直接到 Aliyun OSS，返回云端鏈接。
拖拽上傳：支持單文件或批量拖拽，操作絲滑。
文件管理：按類型分組（圖片、文檔、其他），支持排序和批量編輯備注。
云端同步：初始化時加載 OSS 文件列表，刪除時同步清理云端。

它就像一個“云端快遞員”，把你的文件快速送上云端，還能隨時查收！

代碼拆解與優化

原始代碼的問題

原始代碼已經很強大，但有幾處可以改進：

上傳狀態管理混亂：初始文件狀態未明確定義，進度更新不完整。
錯誤處理不足：上傳和刪除的異常捕獲不夠健壯。
性能優化空間：文件列表更新可以更高效。

我們將優化這些點，讓代碼更優雅、更健壯。

優化后的代碼

1. 類型定義與工具函數

// utils.ts
import OSS from 'ali-oss';
import { message } from 'antd';
import { FileData, Props } from './index';export function getFileType(fileName: string): FileData['type'] {if (/\.(png|jpg|jpeg|gif)$/i.test(fileName)) return 'image';if (/\.(doc|docx|pdf|xls|xlsx|pptx)$/i.test(fileName)) return 'document';return 'other';
}export async function uploadToOSS(file: File,ossConfig: Props['ossConfig'],onProgress: (data: Partial<FileData>) => void,
): Promise<FileData> {if (!ossConfig) throw new Error('OSS 配置未提供');const client = new OSS({region: ossConfig.region,accessKeyId: ossConfig.accessKeyId,accessKeySecret: ossConfig.accessKeySecret,bucket: ossConfig.bucket,});const fileName = `${Date.now()}-${file.name}`;const result = await client.put(fileName, file, {progress: p => onProgress({ percent: Math.round(p * 100) }),});if (result.res.status !== 200) throw new Error('OSS 上傳失敗');const url = result.url || `https://${ossConfig.bucket}.${ossConfig.region}.aliyuncs.com/${fileName}`;return {uid: `${Date.now()}-${Math.random()}`,fileId: fileName,name: file.name,thumbUrl: url,url,status: 'done',percent: 100,type: getFileType(file.name),uploadTime: Date.now(),cloudUrl: url,};
}export async function delfileFromOSS(fileName: string,ossConfig: Props['ossConfig'],
): Promise<void> {const client = new OSS({ ...ossConfig! });const result = await client.delete(fileName);if (result.res.status !== 204) throw new Error('OSS 刪除失敗');message.success(`文件 ${fileName} 已從 OSS 刪除`);
}export async function getOSSList(ossConfig: Props['ossConfig']): Promise<FileData[]> {const client = new OSS({ ...ossConfig! });const result = await client.list();if (result.res.status !== 200) throw new Error('獲取 OSS 文件列表失敗');return result.objects.map((r: any) => ({uid: `${r.name}-${Date.now()}`,fileId: r.name,name: r.name,thumbUrl: r.url,url: r.url,status: 'done',percent: 100,type: getFileType(r.name),uploadTime: new Date(r.lastModified).getTime(),}));
}export function validateFile(file: File, accept: string, maxBytes: number): boolean {const types = accept.split(',').map(t => t.trim());const isValidType = types.some(t => file.name.endsWith(t));const isValidSize = file.size / 1024 / 1024 < maxBytes;if (!isValidType) message.warning('上傳文件格式不支持');if (!isValidSize) message.warning(`文件大小不能超過${maxBytes}MB`);return isValidType && isValidSize;
}

優化亮點：

uploadToOSS：規范化返回 FileData，支持進度更新。
delfileFromOSS：移除回調，簡化邏輯。
getOSSList：直接返回文件列表，優化數據處理。

2. 主組件：AliUploader

import React, { useState, useEffect } from 'react';
import { Upload, Button, Collapse, Select, Modal, Input, message } from 'antd';
import { UploadOutlined } from '@ant-design/icons';
import { FileData, Props } from './index';
import { FileItem } from './FileItem';
import { uploadToOSS, delfileFromOSS, getOSSList, validateFile } from './utils';
import './index.less';const { Panel } = Collapse;
const { Option } = Select;const AliUploader: React.FC<Props> = ({accept = '.doc,.docx,.xls,.xlsx,.pdf,.pptx,.png,.jpg',uploadName = '上傳文件',listType = 'text',maxCount = 1,maxBytes = 20,multiple = false,fileList = [],ossConfig,showUploadList = true,disabled = false,extraTip,showTips = true,onChange,onLoading,onSuccess,filedIds,
}) => {const [uploadFileList, setUploadFileList] = useState<FileData[]>(fileList);const [loading, setLoading] = useState(false);const [sortBy, setSortBy] = useState<'time' | 'name'>('time');const [selectedFiles, setSelectedFiles] = useState<string[]>([]);const [batchEditVisible, setBatchEditVisible] = useState(false);const [batchNote, setBatchNote] = useState('');const handleUpload = async (file: File, files?: File[]) => {const uploadFiles = multiple && files ? files : [file];if (uploadFileList.length + uploadFiles.length > maxCount) {message.warning(`最多上傳${maxCount}個文件`);return;}setLoading(true);onLoading?.(true);const newFiles = uploadFiles.map(f => ({uid: `${Date.now()}-${Math.random()}`,name: f.name,thumbUrl: '',status: 'uploading' as const,percent: 0,type: getFileType(f.name),uploadTime: Date.now(),}));setUploadFileList(prev => (maxCount === 1 ? newFiles : [...prev, ...newFiles]));try {const results = await Promise.all(uploadFiles.map((f, i) =>uploadToOSS(f, ossConfig!, data =>setUploadFileList(prev =>prev.map(item => (item.uid === newFiles[i].uid ? { ...item, ...data } : item)),),),),);const finalList = maxCount === 1 ? results : [...uploadFileList.filter(f => !newFiles.some(n => n.uid === f.uid)), ...results];setUploadFileList(finalList);onChange?.(finalList);onSuccess?.(finalList);filedIds?.(finalList.map(f => f.fileId));message.success(`${results.length}個文件上傳成功`);} catch (error) {setUploadFileList(prev =>prev.map(f => (newFiles.some(n => n.uid === f.uid) ? { ...f, status: 'error' } : f)),);message.error('部分文件上傳失敗');} finally {setLoading(false);onLoading?.(false);}};const handleRemove = async (file: FileData) => {try {await delfileFromOSS(file.fileId, ossConfig!);const newList = uploadFileList.filter(f => f.uid !== file.uid);setUploadFileList(newList);setSelectedFiles(prev => prev.filter(uid => uid !== file.uid));onChange?.(newList);filedIds?.(newList.map(f => f.fileId));} catch (error) {message.error('刪除失敗');}};const handleEdit = (editedFile: FileData) => {const newList = uploadFileList.map(f => (f.uid === editedFile.uid ? editedFile : f));setUploadFileList(newList);onChange?.(newList);};const handleSelect = (uid: string, selected: boolean) => {setSelectedFiles(prev => (selected ? [...prev, uid] : prev.filter(id => id !== uid)));};const handleBatchEdit = () => {if (selectedFiles.length === 0) {message.warning('請先選擇文件');return;}setBatchEditVisible(true);};const applyBatchEdit = () => {const newList = uploadFileList.map(f =>selectedFiles.includes(f.uid) ? { ...f, note: batchNote } : f,);setUploadFileList(newList);onChange?.(newList);setBatchEditVisible(false);setSelectedFiles([]);setBatchNote('');};useEffect(() => {if (ossConfig) {getOSSList(ossConfig).then(files => setUploadFileList(prev => [...prev, ...files])).catch(() => message.error('獲取 OSS 文件列表失敗'));}}, [ossConfig]);const groupedFiles = {image: uploadFileList.filter(f => f.type === 'image'),document: uploadFileList.filter(f => f.type === 'document'),other: uploadFileList.filter(f => f.type === 'other'),};const sortFiles = (files: FileData[]) =>files.sort((a, b) =>sortBy === 'time' ? b.uploadTime - a.uploadTime : a.name.localeCompare(b.name),);return (<div className="fileUpload"><Upload.Draggeraccept={accept}listType={listType as any}maxCount={maxCount}multiple={multiple}beforeUpload={(file, fileList) => {if (validateFile(file, accept, maxBytes)) {handleUpload(file, fileList);}return false; // 阻止默認上傳}}fileList={[]}disabled={disabled || loading}><Button icon={<UploadOutlined />} loading={loading} disabled={disabled}>{uploadName}</Button>{showTips && (<div className="tip">{`支持${maxBytes}MB以內的${accept}文件（可拖拽上傳，直接存至 OSS）`}</div>)}</Upload.Dragger>{showUploadList && (<div><div style={{ margin: '10px 0' }}><Select value={sortBy} onChange={setSortBy} style={{ width: 120, marginRight: 10 }}><Option value="time">按時間排序</Option><Option value="name">按名稱排序</Option></Select><Button onClick={handleBatchEdit} disabled={selectedFiles.length === 0}>批量編輯 ({selectedFiles.length})</Button></div><Collapse defaultActiveKey={['image', 'document', 'other']}>{Object.entries(groupedFiles).map(([type, files]) =>files.length > 0 ? (<Panelheader={`${type === 'image' ? '圖片' : type === 'document' ? '文檔' : '其他'} (${files.length})`}key={type}>{sortFiles(files).map(file => (<FileItemkey={file.uid}file={file}onRemove={() => handleRemove(file)}onEdit={handleEdit}onSelect={handleSelect}selected={selectedFiles.includes(file.uid)}/>))}</Panel>) : null,)}</Collapse></div>)}{extraTip && <div className="extraTip">{extraTip}</div>}<Modalopen={batchEditVisible}title={`批量編輯 (${selectedFiles.length} 個文件)`}onOk={applyBatchEdit}onCancel={() => setBatchEditVisible(false)}><Inputvalue={batchNote}onChange={e => setBatchNote(e.target.value)}placeholder="輸入統一備注"/></Modal></div>);
};export default AliUploader;

.imageList {display: flex;align-items: center;justify-content: space-between;margin-top: 8px;padding: 8px;border: 1px solid #d9d9d9;border-radius: 2px;.deleteBtn {color: rgba(0, 0, 0, 0.45);}
}.fileList {display: flex;align-items: center;justify-content: space-between;margin-top: 8px;padding: 8px;border: 1px solid #d9d9d9;border-radius: 2px;.deleteBtn {color: rgba(0, 0, 0, 0.45);visibility: hidden;}&:hover {background-color: #f5f5f5;.deleteBtn {visibility: visible;}}
}.fileName {margin: 0 8px;
}

優化亮點：

上傳邏輯：規范化狀態管理，修復初始狀態問題。
錯誤處理：增加 try-catch，提升健壯性。
性能優化：避免重復添加文件，提升列表更新效率。

Demo：項目文件上傳器（OSS 版）

我們用一個“項目文件上傳器”展示 AliUploader 的功能。

使用示例

如何使用這個組件？

該組件已集成到 react-nexlif 開源庫中。?具體文檔可參考詳情文檔。你可以通過以下方式引入并使用：

pnpm install?react-nexlif

import React, { useState, useRef } from 'react';
import { AliUploader } from 'react-nexlif';
import { ApartmentOutlined } from '@ant-design/icons';
// import {ossConfig} from './utils';const App: React.FC = () => {const uploadRef = useRef(null);const ossConfig = {region: 'oss-cn-hangzhou',accessKeyId: '',accessKeySecret: '',bucket: '',
};const handleChange = (list: any[]) => {// console.log('當前文件列表:', list);};const handleSuccess = (list: any[]) => {// console.log('上傳成功:', list);list.forEach((file) => {// console.log(`文件 ${file.name} 的 OSS 鏈接: ${file.url}`),});};const handleIds = (ids: string[]) => {console.log('文件ID:', ids);};return (<div style={{ padding: '20px', maxWidth: '600px' }}><h2>項目文件上傳器（OSS 版）</h2><AliUploaderaccept=".doc,.docx,.pdf,.png,.jpg"uploadName="上傳項目文件到 OSS"maxCount={5}maxBytes={10}multiple={true}listType="picture"showUploadList={true}ossConfig={ossConfig}onChange={handleChange}onSuccess={handleSuccess}filedIds={handleIds}extraTip={<p style={{ color: '#999' }}>支持拖拽批量上傳，直接存至 OSS，最多5個文件</p>}/></div>);
};export default App;

使用效果

初始化：組件加載時從 OSS 獲取已有文件列表。
上傳：拖入 doc.pdf 和 image.png，文件上傳至 OSS，顯示進度。
分組：分為“圖片”和“文檔”，可按時間或名稱排序。
批量編輯：選中文件，添加備注“會議資料”。
刪除：移除文件，同時清理 OSS。
鏈接返回：控制臺打印 OSS 鏈接，如 https://web-xiaoyao.oss-cn-hangzhou.aliyuncs.com/xxx.png。

組件解析：云端快遞的魔法

OSS 集成：
- uploadToOSS 上傳文件，返回 OSS 鏈接。
- getOSSList 初始化云端文件。
- delfileFromOSS 刪除云端文件。
上傳體驗：
- 多線程上傳，進度實時更新。
- 拖拽支持，操作直觀。
文件管理：
- 分組、排序、批量編輯，井然有序。
- 預覽和刪除，功能齊全。