Hướng dẫn dùng fileupload react trong PHP
Giới thiệuCó thể bạn chưa từng xử lý việc tải lên tệp trong React hoặc bất kỳ công nghệ nào khác, nhưng có khả năng cao bạn sẽ gặp phải nhu cầu đó, ví dụ như cập nhật ảnh hồ sơ của người dùng, tệp CSV hay PDF. Trong bài hướng dẫn này, bạn sẽ học cách upload file trong ứng dụng React của mình. Thiết lập một appĐể bắt đầu, hãy chạy lệnh sau trong thiết bị đầu cuối của bạn hoặc truy cập https://react.new để có được môi trường phát triển React được cấu hình đầy đủ thông qua https://codesandbox.io. npx create-react-app Tiếp theo, tạo một component đơn giản với một input là file và một nút submit để upload.
Thêm stateBây giờ, hãy thêm một số state vào app của bạn để chứa thông tin về file được người dùng chọn.
Bây giờ hãy triển khai trình xử lý sự kiện
Đối tượng file khi được chọn trông như sau.
Bây giờ hãy thêm logic hiển thị có điều kiện để cung cấp cho người dùng thông tin chi tiết của file.
Upload file bằng tính năng Fetch (Tìm nạp)API Fetch có thể được sử dụng để triển khai tải lên tệp hoặc bạn cũng có thể sử dụng thư viện như Axios để triển khai logic tải lên. Triển khai trình xử lý
Điều gì đã xảy ra ở đây? Bạn đã sử dụng API Fetch cùng với API Javascript gốc của FormData để đăng tệp lên máy chủ file. Một khi việc upload file thành công đến máy chủ sẽ dẫn đến phản hồi dạng như sau:
Phần kết luậnTrong hướng dẫn này, bạn đã học cách upload file bằng React và cách sử dụng API Fetch để tải tệp lên. Nếu bạn muốn đọc thêm về API Fetch và API formData, các tài nguyên sau sẽ giúp:
Copied !!! |