Hướng dẫn dùng react-images-uploading trong PHP

Question

Các khóa học miễn phí qua video:

Lập trình C Java SQL Server PHP HTML5-CSS3-JavaScript

Giới thiệu

Có 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.

Nội dung chính Show

Giới thiệu
Thiết lập một app
Thêm state
Upload file bằng tính năng Fetch (Tìm nạp)
Phần kết luận

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 <YOUR_APP_NAME>

<YOUR_APP_NAME> đề cập đến tên app mong muốn của bạn.

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.

1export default function FileUploadPage(){
2  return(
3    <div>
4      <input type="file" name="file" onChange={changeHandler} />
5      <div>
6        <button onClick={handleSubmission}>Submit</button>
7      </div>
8    </div>
9  )
10}

Thêm state

Bâ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.

1import {useState} from 'react';
2
3export default function FileUploadPage(){
4  const [selectedFile, setSelectedFile] = useState();
5  const [isFilePicked, setIsFilePicked] = useState(false);
6
7  return(
8    <div>
9      <input type="file" name="file" onChange={changeHandler} />
10     <div>
11       <button onClick={handleSubmission}>Submit</button>
12     </div>
13   </div>
14 )
15}

selectedFile chứa thông tin về tệp hiện được chọn.

isFilePicked xác định xem một tập tin đã được chọn hay chưa.

Bây giờ hãy triển khai trình xử lý sự kiện handleSubmission và changeHandler, sau đó thêm điều kiện để hiển thị chi tiết của tệp hiện được chọn trong state.

1import {useState} from 'react';
2
3export default function FileUploadPage(){
4   const [selectedFile, setSelectedFile] = useState();
5   const [isFilePicked, setIsFilePicked] = useState(false);
6
7   const changeHandler = (event) => {
8     setSelectedFile(event.target.files[0]);
9     setIsSelected(true);
10  };
11
12  const handleSubmission = () => {
13  };
14
15  return(
16    <div>
17      <input type="file" name="file" onChange={changeHandler} />
18      <div>
19        <button onClick={handleSubmission}>Submit</button>
20      </div>
21    </div>
22  )
23}

event.target.files là một đối tượng chứa thông tin chi tiết của các file được chọn để tải lên trong một form.

Đối tượng file khi được chọn trông như sau.

1{
2  lastModified: 1588350162449
3  lastModifiedDate: Fri May 01 2020 17:22:42 GMT+0100 (British Summer Time) {} // Date object
4  name: "Pluralsight_logo.png"
5  size: 68317
6  type: "image/png"
7  webkitRelativePath: ""
8  __proto__: File
9}

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.

1import {useState} from 'react';
2
3export default function FileUploadPage(){
4   const [selectedFile, setSelectedFile] = useState();
5   const [isFilePicked, setIsFilePicked] = useState(false);
6
7   const changeHandler = (event) => {
8     setSelectedFile(event.target.files[0]);
9     setIsSelected(true);
10  };
11
12  const handleSubmission = () => {
13  };
14
15  return(
16    <div>
17      <input type="file" name="file" onChange={changeHandler} />
18      {isSelected ? (
19        <div>
20          <p>Filename: {selectedFile.name}</p>
21          <p>Filetype: {selectedFile.type}</p>
22          <p>Size in bytes: {selectedFile.size}</p>
23          <p>
24            lastModifiedDate:{' '}
25            {selectedFile.lastModifiedDate.toLocaleDateString()}
26          </p>
27        </div>
28      ) : (
29        <p>Select a file to show details</p>
30      )}
31      <div>
32        <button onClick={handleSubmission}>Submit</button>
33      </div>
34    </div>
35  )
36}

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ý onClick, như được hiển thị bên dưới, để xử lý việc tải lên tệp.

1import {useState} from 'react';
2
3function FileUploadPage(){
4   const [selectedFile, setSelectedFile] = useState();
5   const [isFilePicked, setIsFilePicked] = useState(false);
6
7   const changeHandler = (event) => {
8     setSelectedFile(event.target.files[0]);
9     setIsSelected(true);
10   };
11
12   const handleSubmission = () => {
13   const formData = new FormData();
14
15   formData.append('File', selectedFile);
16
17   fetch(
18     'https://freeimage.host/api/1/upload?key=6d207e02198a847aa98d0a2a901485a5',
19     {
20       method: 'POST',
21       body: formData,
22     }
23   )
24   .then((response) => response.json())
25   .then((result) => {
26     console.log('Success:', result);
27   })
28   .catch((error) => {
29     console.error('Error:', error);
30   });
31  };
32};
33
34   return(
35     <div>
36       <input type="file" name="file" onChange={changeHandler} />
37       {isFilePicked ? (
38         <div>
39           <p>Filename: {selectedFile.name}</p>
40           <p>Filetype: {selectedFile.type}</p>
41           <p>Size in bytes: {selectedFile.size}</p>
42           <p>Last modified date: {selectedFile.lastModifiedDate.toLocaleDateString()}</p>
43         </div>
44       ) : (
45         <p>Select a file to show details</p>
46       )}
47       <div>
48         <button onClick={handleSubmission}>Submit</button>
49       </div>
50     </div>
51  )
52}

Đ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:

1{
2   "status_code": 200,
3   "success": {
4     "message": "image uploaded",
5     "code": 200
6   },
7   "image": {
8     "name": "example",
9     "extension": "png",
10    "size": 53237,
11    "width": 1151,
12    "height": 898,
13    "date": "2020-11-11 15:32:33",
14    "date_gmt": "2020-11-11 19:32:33",
15    "storage_id": null,
16    "description": null,
17    "nsfw": "0",
18    "md5": "d973298h0d722c956c3629870299735830",
19    "storage": "datefolder",
20    "original_filename": "pluralsight_logo.png",
21    "original_exifdata": null,
22    "views": "0",
23    "id_encoded": "L",
24    "filename": "pluralsight_logo.png",
25    "ratio": 1.2817371937639,
26    "size_formatted": "52 KB",
27    "mime": "image/png",
28    "bits": 8,
29    "channels": null,
30    "url": "http://freeimage.host/images/2020/11/11/pluralsight_logo.png",
31    "url_viewer": "http://freeimage.host/image/L",
32    "thumb": {
33      "filename": "example.th.png",
34      "name": "example.th",
35      "width": 160,
36      "height": 160,
37      "ratio": 1,
38      "size": 17848,
39      "size_formatted": "17.4 KB",
40      "mime": "image/png",
41      "extension": "png",
42      "bits": 8,
43      "channels": null,
44      "url": "http://freeimage.host/images/2020/11/11/pluralsight_logo.th.png"
45    },
46    "medium": {
47      "filename": "pluralsight_logo.md.png",
48      "name": "pluralsight_logo.md",
49      "width": 500,
50      "height": 390,
51      "ratio": 1.2820512820513,
52      "size": 104448,
53      "size_formatted": "102 KB",
54      "mime": "image/png",
55      "extension": "png",
56      "bits": 8,
57      "channels": null,
58      "url": "http://freeimage.host/images/2020/11/11/pluralsight_logo.md.png"
59    },
60    "views_label": "views",
61    "display_url": "http://freeimage.host/images/2020/11/11/pluralsight_logo.md.png",
62    "how_long_ago": "moments ago"
63  },
64  "status_txt": "OK"
65}

Phần kết luận

Trong 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: