Khi xây dựng các ứng dụng web hoặc di động cho phép người dùng tải lên tệp, bạn sẽ gặp nhiều thách thức: đảm bảo tính tương thích trình duyệt, xử lý các tệp lớn một cách hiệu quả, cung cấp phản hồi tức thì và duy trì giao diện người dùng mượt mà. Hướng dẫn từng bước này trình bày một quy trình upload file toàn diện, kết hợp các mẫu thực tế với các mẹo thực hành để giúp ứng dụng của bạn trở nên linh hoạt và hiệu suất cao. **1. Xác định các yêu cầu cơ bản** • Xác định các loại tệp được chấp nhận, kích thước tối đa và bất kỳ quy tắc tên tệp nào. • Quyết định xem bạn sẽ lưu trữ tệp trên client, cloud hay cả hai. • Xác định xem bạn cần xem trước (ví dụ: hình ảnh, PDF) hay chỉ lưu trữ thô. **2. Xác thực ở phía client** Sử dụng HTML5 File API cùng với JavaScript thuần túy để kiểm tra sớm trước khi yêu cầu được gửi đi. ```js const validateFile = (file) => { const maxSize = 10 * 1024 * 1024; // 10 MB const allowedTypes = ['image/jpeg','image/png','application/pdf']; if (!allowedTypes.includes(file.type)) { throw new Error('Loại tệp không được hỗ trợ'); } if (file.size > maxSize) { throw new Error('Tệp vượt quá kích thước tối đa cho phép'); } return true; }; ``` Bắt buộc phải có danh sách kiểm tra lỗi rõ ràng để hiển thị cho người dùng. **3. Giao diện người dùng thân thiện với người dùng (Kéo và thả, chọn tệp) • Bao bọc vùng kéo và thả bằng một thành phần có thể lặp lại. • Hiển thị các tệp đã chọn trong một danh sách với kích thước, tiến trình tải lên và trạng thái. • Sử dụng phản hồi trực quan (ví dụ: thay đổi con trỏ, hiệu ứng phóng to) để chỉ ra các tương tác có thể. **4. Theo dõi tiến trình tải lên Tạo một thành phần phản hồi tiến trình tải lên bằng cách sử dụng đối tượng ProgressEvent của trình duyệt. ```js const uploadFile = async (file, onProgress) => { const formData = new FormData(); formData.append('file', file); const xhr = new XMLHttpRequest(); xhr.upload.addEventListener('progress', (e) => { if (e.lengthComputable) { onProgress((e.loaded / e.total) * 100); } }); xhr.open('POST', '/api/upload'); xhr.send(formData); }; ``` **5. Xử lý lỗi và thử lại Bọc yêu cầu trong một khối try/catch và cung cấp cho người dùng tùy chọn thử lại hoặc tải lên lại. Lưu trữ trạng thái tải lên trong Redux/Zustand để duy trì tính liên tục khi chuyển đổi tab. **6. Chunked upload cho các tệp lớn Nếu kích thước tệp vượt quá ngưỡng (ví dụ: 100 MB), hãy chia tệp thành các chunk có kích thước 5 MB và tải lên tuần tự. Kết hợp ID yêu cầu duy nhất để ghép tệp lại ở phía server. **7. Xem trước tệp Đối với các tệp hình ảnh, sử dụng URL.createObjectURL để hiển thị ngay lập tức. Đối với PDF, tích hợp thư viện như pdf.js để hiển thị ngay trong trình duyệt. **8. Tích hợp với backend Đảm bảo endpoint nhận dữ liệu FormData, kiểm tra kỹ lưỡng để chống lại các tệp đính kèm độc hại, lưu trữ tệp trong bộ nhớ đệm lâu dài (ví dụ: S3) và trả về URL có thể truy cập. **9. Tối ưu hóa hiệu suất • Đảm bảo giải phóng các đối tượng URL.createObjectURL sau khi xem trước. • Sử dụng React.memo hoặc React.lazy cho các thành phần upload nặng. • Triển khai giới hạn tốc độ tải lên phía client để tránh quá tải cho API. **10. Kiểm tra và giám sát Thực hiện kiểm tra tải lên với nhiều loại tệp, kích thước, tình trạng ngoại tuyến và các tình huống mạng không ổn định. Theo dõi thời gian tải lên, tỷ lệ thành công và các sự cố ở phía client. Bằng cách tuân thủ các bước này, bạn sẽ có một quy trình upload file vừa mạnh mẽ vừa dễ bảo trì, mang lại trải nghiệm người dùng liền mạch trên cả React và React Native.