Express - Upload file - form - multipart/form-data
TIL
491
@100daysTIL
38
White

ngminhtrung viết ngày 12/02/2018

Express - Upload file - form - multipart/form-data

Day18

Bài toán: Tạo một microservice nhỏ để upload file, sau khi nhấn submit thì trả về dung lượng của file. Được gợi ý dùng package multer. Để làm được cái này theo tutorial tương đối đơn giản, chỉ có điều băn khoăn lưu ý của multer là: "Multer will not process any form which is not multipart (multipart/form-data).". Ủa vậy multipart/form-data là gì?

multipart/form-data là gì?

Là giá trị truyền vào cho attribute enctype của HTML form.

Ủa HTML form tưởng chỉ có action với method

Bình thường ta sử dụng 2 attributes actionmethod khai báo HTML form:

  • action: liên quan đến địa chỉ (URL) mà dữ liệu sẽ được gửi tới sau khi nhấn submit.
  • method: HTTP method (POST hoặc GET), cách mà form sẽ truyền dữ liệu đi:
    • Với GET, dữ liệu được browser đặt vào trong tham số của URL rồi gửi đi
    • Với POST, dữ liệu được browser mã hóa vào phần body của request.

Nhưng 2 attributes trên chỉ đủ cho dữ liệu dạng TEXT, còn khi gửi files ta cần thêm attribute enctype để báo cho server biết định dạng của dữ liệu sau khi convert.

Attribute enctype trông như thế nào?

Nếu không phải gửi file, attribute enctype sẽ có giá trị mặc định là application/x-www-form-urlencoded. Hiểu nôm na là ta thông báo cho server là: "Data điền vào form đã được gửi kèm (encoded) trong tham số của URL (URL parameters)".

Nhưng khi gửi file (vốn là binary data) qua HTTP (vốn giao thức định dạng text), ta cần:

  • đặt method của form là POST. Bởi file không thể đặt vào tham số của URL.
  • đặt enctypemultipart/form-data: bởi dữ liệu và file sẽ được chia nhỏ làm nhiều phần (multiple parts).

Ví dụ HTML form để gửi file

<form method="post" enctype="multipart/form-data">
  <div>
    <label for="file">Choose a file</label>
    <input type="file" id="file" name="myFile">
  </div>
  <div>
    <button>Send the file</button>
  </div>
</form>

Vậy data được mã hóa với method=post enctype="multipart/form-data" sẽ trông như thế nào?

https://www.w3.org/TR/html5/sec-forms.html#form-submission-introduction

Phần body của form khi được gửi đi trông sẽ có dạng như sau:

------kYFrd4jNJEgCervEContent-Disposition: form-data; name="..."

------kYFrd4jNJEgCervE
Content-Disposition: form-data; name="..."

------kYFrd4jNJEgCervE--

Làm sao để tự mình kiểm chứng body chứa mã hóa của form?

Xem tại đây. Bản thân mình cũng chưa làm (chưa hiểu các lệnh).

Kết luận:

Cảm giác mới đụng đến bề mặt của những thứ liên quan đến form cũng như HTTP request. Sẽ còn quay lại tìm cách "tóm" phần encoded data trong body của form để so sánh giũa urlencoded với multiparts xem như thế nào.

Tham khảo

ngminhtrung 12-02-2018

Bình luận


White
{{ comment.user.name }}
Bỏ hay Hay
{{comment.like_count}}
Male avatar
{{ comment_error }}
Hủy
   

Hiển thị thử

Chỉnh sửa

White

ngminhtrung

29 bài viết.
14 người follow
Kipalog
{{userFollowed ? 'Following' : 'Follow'}}
Cùng một tác giả
White
25 5
Ghi chú: Tiêu đề hoàn toàn mang tính câu view. Bài copy từ blog của tác giả :) Tại sao lại có bài viết này? Một ngày đẹp giời tôi cần kiểm t...
ngminhtrung viết 2 tháng trước
25 5
White
4 11
Nói thực, tôi cũng không biết gì về (Link) cho đến hôm bị cô bạn (Linh Ngô) đè ra cài ngấu nghiến trên máy và bảo cái này là "bắt buộc" nếu dùng Ma...
ngminhtrung viết 1 tháng trước
4 11
White
4 0
Vẽ Spirograph bằng D3.js Chắc hồi trẻ con ai cũng đã từng một lần nghịch 1 cái thước "sáng tạo" tên là "Spirograph" (/ˈspīrəˌɡraf/). Khi ấy ta đặt...
ngminhtrung viết 30 ngày trước
4 0
Bài viết liên quan
White
18 1
Toán tử XOR có tính chất: + A XOR A = 0 + 0 XOR A = A Với tính chất này, có thể cài đặt bài toán sau với độ phức tạp O(N) về runtime, và với O(1)...
kiennt viết hơn 1 năm trước
18 1
White
1 1
Chào mọi người, hôm nay mình viết một bài TIL nhỏ về cách lấy độ phân giải của màn hình hiện tại đang sử dụng. xdpyinfo | grep dimensions Kết quả...
namtx viết 7 tháng trước
1 1
{{like_count}}

kipalog

{{ comment_count }}

bình luận

{{liked ? "Đã kipalog" : "Kipalog"}}


White
{{userFollowed ? 'Following' : 'Follow'}}
29 bài viết.
14 người follow

 Đầu mục bài viết

Vẫn còn nữa! x

Kipalog vẫn còn rất nhiều bài viết hay và chủ đề thú vị chờ bạn khám phá!