Tải tệp excel lên S3 Node js

Will là một nhà khoa học máy tính và say mê gần như tất cả các khía cạnh của lĩnh vực công nghệ. Ông đặc biệt quan tâm đến điện toán di động và xã hội và hiện là nhà nghiên cứu trong lĩnh vực này tại Đại học Cardiff

Trực tiếp tải lên tệp S3 trong nút. jsEnglish — 日本語に切り替える

Cập nhật lần cuối ngày 09 tháng 3 năm 2022

Mục lục

Các ứng dụng web thường yêu cầu khả năng cho phép người dùng tải lên các tệp như hình ảnh, phim và tài liệu lưu trữ. Amazon S3 là tùy chọn lưu trữ phổ biến và đáng tin cậy cho các tệp này

Bài viết này trình bày cách tạo một Nút. js tải tệp trực tiếp lên S3 thay vì thông qua ứng dụng web, sử dụng hỗ trợ Chia sẻ tài nguyên nguồn gốc chéo (CORS) của S3. Khung web Express được sử dụng để tạo điều kiện thuận lợi cho việc xử lý yêu cầu trong các ví dụ bên dưới, nhưng quy trình phải gần như giống hệt nhau trong bất kỳ Nút nào. ứng dụng js

Tải trực tiếp lên S3

Một ví dụ đầy đủ về mã được thảo luận trong bài viết này có sẵn để sử dụng trực tiếp trong kho lưu trữ GitHub này

Ưu điểm chính của tải lên trực tiếp là tải trên dynos của ứng dụng của bạn sẽ giảm đáng kể. Việc sử dụng các quy trình phía ứng dụng để nhận tệp và chuyển sang S3 có thể buộc các dynos của bạn không cần thiết và điều đó có nghĩa là chúng sẽ không thể đáp ứng các yêu cầu web đồng thời một cách hiệu quả

Ứng dụng sử dụng JavaScript phía máy khách và phía ứng dụng để ký các yêu cầu. Quá trình tải lên thực tế được thực hiện không đồng bộ để bạn có thể quyết định cách xử lý luồng ứng dụng của mình sau khi quá trình tải lên hoàn tất (ví dụ: bạn có thể muốn chuyển hướng người dùng đến một trang khác sau khi tải lên thành công thay vì làm mới toàn bộ trang)

Ví dụ về một tình huống chỉnh sửa tài khoản đơn giản được sử dụng làm hướng dẫn hoàn thành các bước khác nhau cần thiết để thực hiện tải lên trực tiếp và liên kết ứng dụng này với nhiều trường hợp sử dụng hơn. Thông tin thêm về kịch bản này được cung cấp sau

Tổng quan

S3 bao gồm một tập hợp các nhóm, mỗi nhóm có một tên duy nhất trên toàn cầu, trong đó có thể lưu trữ các tệp riêng lẻ (được gọi là đối tượng) và thư mục

Để tải tệp lên S3, bạn sẽ cần ID khóa truy cập và Khóa truy cập bí mật đóng vai trò là tên người dùng và mật khẩu. Tài khoản khóa truy cập sẽ cần phải có đủ đặc quyền truy cập vào bộ chứa mục tiêu để quá trình tải lên thành công

Vui lòng xem Bài viết S3 để biết thêm thông tin về điều này, cách tạo nhóm và xử lý khóa xác thực của bạn

Nói chung, phương pháp được mô tả trong bài viết này tuân theo các bước đơn giản sau

• Một tệp được người dùng chọn để tải lên trong trình duyệt web của họ;
• Trình duyệt của người dùng đưa ra yêu cầu đối với ứng dụng web của bạn trên Heroku, tạo chữ ký tạm thời để ký yêu cầu tải lên;
• Yêu cầu đã ký tạm thời được trả về trình duyệt ở định dạng JSON;
• Sau đó, trình duyệt tải tệp trực tiếp lên Amazon S3 bằng cách sử dụng yêu cầu đã ký do Nút của bạn cung cấp. ứng dụng js

Hướng dẫn này bao gồm thông tin về cách triển khai mã phía máy khách và phía ứng dụng để tạo thành hệ thống hoàn chỉnh. Sau khi làm theo hướng dẫn, bạn sẽ có một hệ thống barebones đang hoạt động, cho phép người dùng của bạn tải tệp lên S3. Tuy nhiên, thường đáng để thêm chức năng bổ sung để giúp cải thiện tính bảo mật của hệ thống và điều chỉnh nó cho các mục đích sử dụng cụ thể của riêng bạn. Con trỏ cho điều này được đề cập trong các phần thích hợp của hướng dẫn

Việc tạo chữ ký trên máy chủ sử dụng SDK chính thức của AWS, như được giải thích sau. Vui lòng xem tài liệu của họ để biết thông tin về các tính năng của SDK này

điều kiện tiên quyết

• Heroku CLI đã được cài đặt;
• Nút. js đã được cài đặt;
• Một ứng dụng Heroku đã được tạo cho dự án hiện tại;
• Một thùng AWS S3 ;
• Bạn có các khóa xác thực AWS có quyền ghi vào bộ chứa

thiết lập ban đầu

thiết lập S3

Bây giờ, bạn sẽ cần chỉnh sửa một số thuộc tính quyền của bộ chứa S3 đích để yêu cầu cuối cùng có đủ đặc quyền để ghi vào bộ chứa. Trong trình duyệt web, đăng nhập vào bảng điều khiển AWS và chọn phần S3. Chọn nhóm thích hợp và nhấp vào tab

$ mkdir NodeDirectUploader

9. Một số tùy chọn hiện được cung cấp trên trang này (bao gồm Chặn truy cập công khai, Danh sách kiểm soát truy cập, Chính sách nhóm và cấu hình CORS)

Đầu tiên, đảm bảo rằng “Chặn tất cả quyền truy cập công cộng” đã bị tắt và đặc biệt là tắt “Chặn quyền truy cập công khai vào nhóm và đối tượng được cấp thông qua danh sách kiểm soát truy cập mới” và “Chặn quyền truy cập công khai vào nhóm và đối tượng được cấp thông qua bất kỳ danh sách kiểm soát truy cập nào” . Thiết lập bộ chứa theo cách này cho phép chúng tôi đọc nội dung của nó mà không cần các URL đã ký, nhưng điều này có thể không phù hợp với các dịch vụ đang chạy trong sản xuất

Tiếp theo, bạn sẽ cần định cấu hình cài đặt CORS (Chia sẻ tài nguyên nguồn gốc chéo) của vùng lưu trữ, cài đặt này sẽ cho phép ứng dụng của bạn truy cập nội dung trong vùng lưu trữ S3. Mỗi quy tắc phải chỉ định một tập hợp các miền được cấp quyền truy cập vào nhóm cũng như các phương thức và tiêu đề được phép từ các miền đó

Để điều này hoạt động trong ứng dụng của bạn, hãy nhấp vào 'Chỉnh sửa' và nhập JSON sau cho cài đặt CORS của nhóm

[
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "GET",
            "HEAD",
            "POST",
            "PUT"
        ],
        "AllowedOrigins": [
            "*"
        ],
        "ExposeHeaders": []
    }
]

Nhấp vào 'Lưu thay đổi' và đóng trình chỉnh sửa

Điều này yêu cầu S3 cho phép mọi miền truy cập vào nhóm và các yêu cầu đó có thể chứa bất kỳ tiêu đề nào, điều này thường phù hợp để thử nghiệm. Khi triển khai, bạn nên thay đổi 'AllowedOrigin' để chỉ chấp nhận các yêu cầu từ miền của bạn

Nếu bạn muốn sử dụng thông tin xác thực S3 dành riêng cho ứng dụng này, thì bạn có thể tạo nhiều khóa hơn trong các trang tài khoản AWS. Điều này giúp tăng cường bảo mật, vì bạn có thể chỉ định một nhóm yêu cầu rất cụ thể mà bộ khóa này có thể thực hiện. Nếu điều này phù hợp với bạn hơn, thì bạn sẽ cần định cấu hình người dùng IAM của mình trong tùy chọn Chỉnh sửa chính sách bộ chứa trong bộ chứa S3 của bạn. Có nhiều hướng dẫn khác nhau trên các trang web của AWS nêu chi tiết cách thực hiện điều này

thiết lập ứng dụng

Nếu ứng dụng của bạn chưa được thiết lập, thì sẽ rất hữu ích nếu bạn làm như vậy ở giai đoạn này. Để bắt đầu, hãy tạo một thư mục ở đâu đó trên máy cục bộ của bạn

$ mkdir NodeDirectUploader

Bây giờ hãy tạo thêm hai thư mục con của

$ cd NodeDirectUploader
$ mkdir views
$ mkdir public

0 để chứa các trang HTML và tệp hỗ trợ của bạn

$ cd NodeDirectUploader
$ mkdir views
$ mkdir public

Trình quản lý gói của Node,

$ cd NodeDirectUploader
$ mkdir views
$ mkdir public

1, phải được cài đặt theo mặc định cùng với Node và có thể được sử dụng để xử lý việc cài đặt và cập nhật các gói cần thiết cho ứng dụng của bạn. Để bắt đầu điều này, hãy chạy công cụ thiết lập gói tương tác của Node trong thư mục gốc của thư mục ứng dụng của bạn

$ npm init

Công cụ này sẽ hỏi một số câu hỏi về ứng dụng của bạn, bao gồm tên, mô tả, cấp phép và kiểm soát phiên bản, đồng thời tạo một tệp có tên

$ cd NodeDirectUploader
$ mkdir views
$ mkdir public

2 trong thư mục gốc của ứng dụng. Tệp này sử dụng phản hồi của bạn để duy trì thông tin về ứng dụng của bạn, bạn có thể tự do chỉnh sửa thông tin này khi phát triển thêm

Có thể sử dụng cùng một tệp để dễ dàng khai báo các phần phụ thuộc của ứng dụng, điều này sẽ tạo điều kiện thuận lợi cho việc triển khai và khả năng chia sẻ ứng dụng của bạn. Để làm như vậy, hãy chỉnh sửa

$ cd NodeDirectUploader
$ mkdir views
$ mkdir public

2 và thêm một đối tượng JSON

$ cd NodeDirectUploader
$ mkdir views
$ mkdir public

4 để chứa các gói phụ thuộc sau

[
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "GET",
            "HEAD",
            "POST",
            "PUT"
        ],
        "AllowedOrigins": [
            "*"
        ],
        "ExposeHeaders": []
    }
]

0

Những phụ thuộc này sau đó có thể được cài đặt bằng cách sử dụng

$ cd NodeDirectUploader
$ mkdir views
$ mkdir public

1

[
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "GET",
            "HEAD",
            "POST",
            "PUT"
        ],
        "AllowedOrigins": [
            "*"
        ],
        "ExposeHeaders": []
    }
]

2

Việc sử dụng các gói này sẽ trở nên rõ ràng sau này và việc cài đặt chúng theo cách này cho phép kiểm soát tốt hơn các phụ thuộc trên mỗi ứng dụng của bạn khi ứng dụng của bạn phát triển

thiết lập heroku

Để ứng dụng của bạn truy cập thông tin đăng nhập AWS để ký yêu cầu tải lên, chúng sẽ cần được thêm dưới dạng biến cấu hình trong Heroku

[
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "GET",
            "HEAD",
            "POST",
            "PUT"
        ],
        "AllowedOrigins": [
            "*"
        ],
        "ExposeHeaders": []
    }
]

3

Ngoài thông tin đăng nhập truy cập AWS, hãy đặt tên cho bộ chứa S3 mục tiêu của bạn

[
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "GET",
            "HEAD",
            "POST",
            "PUT"
        ],
        "AllowedOrigins": [
            "*"
        ],
        "ExposeHeaders": []
    }
]

4

Sử dụng vars cấu hình tốt hơn các tệp cấu hình vì lý do bảo mật. Tránh đặt mật khẩu và khóa truy cập trực tiếp vào mã ứng dụng của bạn hoặc trong tệp cấu hình. Vui lòng xem bài viết Cấu hình và Vars cấu hình để biết thêm thông tin

Việc thiết lập các biến môi trường cục bộ cho ứng dụng của bạn rất hữu ích để chạy và kiểm tra ứng dụng của bạn cục bộ. Để biết thêm thông tin, hãy xem phần của bài viết Heroku Local. Thông tin về cách khởi chạy ứng dụng của bạn cục bộ sẽ được cung cấp ở phần sau của bài viết này

Hãy nhớ thêm tệp

$ cd NodeDirectUploader
$ mkdir views
$ mkdir public

6 vào tệp

$ cd NodeDirectUploader
$ mkdir views
$ mkdir public

7 của bạn, vì tệp này chỉ được sử dụng để thử nghiệm cục bộ

Tải lên trực tiếp

Các quy trình và các bước cần thiết để thực hiện tải trực tiếp lên S3 sẽ được trình bày thông qua việc sử dụng một tình huống chỉnh sửa hồ sơ đơn giản cho mục đích của bài viết này. Ví dụ này sẽ liên quan đến việc người dùng được phép chọn ảnh đại diện để tải lên và nhập một số thông tin cơ bản sẽ được lưu trữ như một phần tài khoản của họ

Trong trường hợp này, thủ tục sau đây sẽ diễn ra

• Người dùng được hiển thị một trang web, chứa các yếu tố khuyến khích người dùng chọn một hình ảnh để tải lên làm hình đại diện của họ và nhập tên người dùng và tên riêng của họ
• Một phần tử chịu trách nhiệm duy trì bản xem trước của hình ảnh đã chọn bởi người dùng. Theo mặc định và nếu không có hình ảnh nào được chọn để tải lên, thì hình ảnh đại diện mặc định sẽ được sử dụng thay thế (làm cho việc tải lên hình ảnh trở thành tùy chọn hiệu quả đối với người dùng trong trường hợp này)
• Khi người dùng chọn một hình ảnh để tải lên, quá trình tải lên S3 được xử lý tự động và không đồng bộ với quy trình được mô tả trước đó trong bài viết này. Bản xem trước hình ảnh sau đó được cập nhật với hình ảnh đã chọn sau khi quá trình tải lên hoàn tất và thành công
• Sau đó, người dùng có thể tự do chuyển sang điền phần còn lại của thông tin
• Sau đó, người dùng nhấp vào nút “gửi”, nút này sẽ đăng tên người dùng, tên và URL của hình ảnh đã tải lên ứng dụng Node để được kiểm tra và/hoặc lưu trữ. Nếu không có hình ảnh nào được người dùng tải lên trước đó, URL hình ảnh đại diện mặc định sẽ được đăng thay thế

Thiết lập mã phía máy khách

Không yêu cầu mã của bên thứ ba để hoàn thành việc triển khai ở phía máy khách

HTML và JavaScript hiện có thể được tạo để xử lý lựa chọn tệp, nhận yêu cầu và chữ ký từ ứng dụng Nút của bạn, sau đó thực hiện yêu cầu tải lên

Đầu tiên, tạo một tệp có tên

$ cd NodeDirectUploader
$ mkdir views
$ mkdir public

8 trong thư mục

$ cd NodeDirectUploader
$ mkdir views
$ mkdir public

9 của ứng dụng của bạn và điền vào

$ npm init

0 và các thẻ HTML cần thiết khác một cách thích hợp cho ứng dụng của bạn. Trong phần nội dung của tệp HTML này, hãy bao gồm một tệp đầu vào và một phần tử sẽ chứa các cập nhật trạng thái về tiến trình tải lên. Ngoài ra, hãy tạo một biểu mẫu để cho phép người dùng nhập tên người dùng và tên đầy đủ của họ và một phần tử

$ npm init

1 ẩn để giữ URL của hình ảnh đại diện đã chọn

Để xem tệp HTML đã hoàn thành, vui lòng xem mã thích hợp trong kho lưu trữ đồng hành

$ mkdir NodeDirectUploader

1

Phần tử

$ npm init

2 ban đầu giữ hình ảnh đại diện mặc định (sẽ trở thành hình đại diện của người dùng nếu không chọn hình ảnh mới) và đầu vào

$ npm init

3 duy trì URL hiện tại của hình đại diện người dùng đã chọn. Cả hai điều này đều được cập nhật bởi JavaScript, được thảo luận bên dưới, khi người dùng chọn hình đại diện mới

Do đó, khi người dùng cuối cùng nhấp vào nút gửi, URL của hình đại diện sẽ được gửi, cùng với tên người dùng và tên đầy đủ của người dùng, đến điểm cuối mong muốn của bạn để xử lý phía máy chủ

Mã phía máy khách chịu trách nhiệm đạt được hai điều

1. Truy xuất yêu cầu đã ký từ ứng dụng mà hình ảnh có thể được PUT sang S3
2. Trên thực tế, ĐẶT hình ảnh lên S3 bằng yêu cầu đã ký

Các đối tượng

$ npm init

4 của JavaScript có thể được tạo và sử dụng để tạo các yêu cầu HTTP không đồng bộ

Để thực hiện điều này, trước tiên hãy tạo một khối

$ npm init

5 và viết một số mã để lắng nghe các thay đổi trong tệp đầu vào, sau khi tài liệu đã được tải và bắt đầu quá trình tải lên

$ mkdir NodeDirectUploader

6

Mã này cũng xác định chính đối tượng tệp sẽ được tải lên. Nếu một cái đã được chọn đúng, nó sẽ tiến hành gọi một hàm để lấy yêu cầu PUT đã ký cho tệp. Do đó, tiếp theo, hãy viết một hàm chấp nhận đối tượng tệp và truy xuất một yêu cầu đã ký thích hợp cho nó từ ứng dụng

$ mkdir NodeDirectUploader

0

Nếu tên (

$ npm init

6) và/hoặc loại mime (

$ npm init

7) của tệp bạn tải lên chứa các ký tự đặc biệt (chẳng hạn như dấu cách), thì chúng phải được mã hóa trước (e. g.

$ npm init

8)

Hàm trên chuyển tên tệp và loại mime dưới dạng tham số cho yêu cầu GET vì chúng cần thiết trong quá trình xây dựng yêu cầu đã ký, sẽ được đề cập sau trong bài viết này. Nếu việc truy xuất yêu cầu đã ký thành công, chức năng sẽ tiếp tục bằng cách gọi một chức năng để tải tệp thực tế lên

$ mkdir NodeDirectUploader

1

Chức năng này chấp nhận tệp sẽ được tải lên, yêu cầu đã ký và URL được tạo đại diện cho URL truy xuất cuối cùng của ảnh đại diện. Hai đối số sau sẽ được trả về như một phần của phản hồi từ ứng dụng. Hàm này, nếu yêu cầu tới S3 thành công, thì sẽ cập nhật phần tử xem trước thành hình ảnh đại diện mới và lưu trữ URL trong đầu vào ẩn để có thể gửi để lưu trữ trong ứng dụng

Bây giờ, khi người dùng đã hoàn thành phần còn lại của biểu mẫu và nhấp vào gửi, tên, tên người dùng và hình ảnh đại diện đều có thể được đăng lên cùng một điểm cuối

Nếu bạn thấy rằng trang không hoạt động như ý muốn sau khi triển khai hệ thống, thì hãy cân nhắc sử dụng

$ npm init

9 để ghi lại bất kỳ lỗi nào được phát hiện bên trong hàm

[
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "GET",
            "HEAD",
            "POST",
            "PUT"
        ],
        "AllowedOrigins": [
            "*"
        ],
        "ExposeHeaders": []
    }
]

00 và sử dụng bảng điều khiển lỗi của trình duyệt để giúp chẩn đoán sự cố

 

Thông lệ tốt là thông báo cho người dùng về bất kỳ hoạt động kéo dài nào trong bất kỳ hình thức ứng dụng nào (dựa trên web hoặc thiết bị) và hiển thị các bản cập nhật về các thay đổi. Do đó, một chỉ báo tải có thể được hiển thị giữa việc chọn tệp và quá trình tải lên hoàn tất. Nếu không có loại thông tin này, người dùng có thể nghi ngờ rằng trang đã bị lỗi và có thể thử làm mới trang hoặc làm gián đoạn quá trình tải lên

Thiết lập mã Node phía ứng dụng

Phần này thảo luận về việc sử dụng Node. js để tạo chữ ký tạm thời mà yêu cầu tải lên có thể được ký. Chữ ký tạm thời này sử dụng thông tin đăng nhập xác thực AWS (khóa truy cập và khóa bí mật) làm cơ sở cho chữ ký, nhưng người dùng sẽ không có quyền truy cập trực tiếp vào thông tin này. Sau khi chữ ký hết hạn, thì các yêu cầu tải lên có cùng chữ ký sẽ không thành công

Để xem tệp Node đã hoàn thành, vui lòng xem mã thích hợp trong kho lưu trữ đồng hành

Bắt đầu bằng cách tạo tệp ứng dụng chính của bạn,

[
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "GET",
            "HEAD",
            "POST",
            "PUT"
        ],
        "AllowedOrigins": [
            "*"
        ],
        "ExposeHeaders": []
    }
]

01, trong thư mục gốc của thư mục ứng dụng và thiết lập ứng dụng khung của bạn một cách thích hợp

$ mkdir NodeDirectUploader

2

Trong một số trường hợp, có thể cần phải kiểm tra xem biến var 102 của môi trường có phải là số hay không bằng cách sử dụng _______103

Các gói được cài đặt với

$ cd NodeDirectUploader
$ mkdir views
$ mkdir public

1 được nhập ở đầu ứng dụng. Sau đó, ứng dụng Express được thiết lập và cuối cùng, tên bộ chứa được tải từ môi trường

Bây giờ, bạn nên định cấu hình khu vực AWS của mình. Để làm như vậy, hãy cập nhật đối tượng

[
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "GET",
            "HEAD",
            "POST",
            "PUT"
        ],
        "AllowedOrigins": [
            "*"
        ],
        "ExposeHeaders": []
    }
]

05 đã nhập. Ví dụ

$ mkdir NodeDirectUploader

3

Hãy nhớ sử dụng khu vực mà nhóm mục tiêu của bạn nằm trong đó. Nếu bạn cần, hãy sử dụng để tìm khu vực của bạn

Tiếp theo, trong cùng một tệp, bạn sẽ cần tạo các chế độ xem chịu trách nhiệm trả lại thông tin chính xác cho trình duyệt của người dùng khi các yêu cầu được thực hiện đối với các URL khác nhau. Bên trong tệp

[
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "GET",
            "HEAD",
            "POST",
            "PUT"
        ],
        "AllowedOrigins": [
            "*"
        ],
        "ExposeHeaders": []
    }
]

01, xác định chế độ xem cho các yêu cầu tới

[
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "GET",
            "HEAD",
            "POST",
            "PUT"
        ],
        "AllowedOrigins": [
            "*"
        ],
        "ExposeHeaders": []
    }
]

07 để trả lại trang

$ cd NodeDirectUploader
$ mkdir views
$ mkdir public

8, trong đó có biểu mẫu để người dùng hoàn thành

$ mkdir NodeDirectUploader

4

Bây giờ hãy tạo chế độ xem, trong cùng một tệp JavaScript, chịu trách nhiệm tạo và trả về chữ ký mà JavaScript phía máy khách có thể tải hình ảnh lên. Đây là yêu cầu đầu tiên của khách hàng trước khi thử tải lên S3. Chế độ xem này phản hồi các yêu cầu tới

[
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "GET",
            "HEAD",
            "POST",
            "PUT"
        ],
        "AllowedOrigins": [
            "*"
        ],
        "ExposeHeaders": []
    }
]

09

$ mkdir NodeDirectUploader

5

Mã này sử dụng mô-đun

[
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "GET",
            "HEAD",
            "POST",
            "PUT"
        ],
        "AllowedOrigins": [
            "*"
        ],
        "ExposeHeaders": []
    }
]

20 để tạo URL đã ký mà trình duyệt có thể sử dụng để thực hiện yêu cầu PUT tới S3. Ngoài ra, URL tiềm năng của đối tượng được tải lên được tạo dưới dạng kết hợp giữa tên bộ chứa S3 và tên đối tượng. URL này và yêu cầu đã ký sau đó được trả về trình duyệt ở định dạng JSON

Tham số

[
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "GET",
            "HEAD",
            "POST",
            "PUT"
        ],
        "AllowedOrigins": [
            "*"
        ],
        "ExposeHeaders": []
    }
]

21 mô tả số giây mà URL đã ký sẽ có hiệu lực đối với. Trong một số trường hợp, chẳng hạn như khi tải lên các tệp lớn, giá trị lớn hơn có thể phù hợp hơn để kéo dài hiệu lực của URL đã ký

Khởi tạo đối tượng

[
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "GET",
            "HEAD",
            "POST",
            "PUT"
        ],
        "AllowedOrigins": [
            "*"
        ],
        "ExposeHeaders": []
    }
]

22 sẽ tự động tải các biến

[
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "GET",
            "HEAD",
            "POST",
            "PUT"
        ],
        "AllowedOrigins": [
            "*"
        ],
        "ExposeHeaders": []
    }
]

23 và

[
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "GET",
            "HEAD",
            "POST",
            "PUT"
        ],
        "AllowedOrigins": [
            "*"
        ],
        "ExposeHeaders": []
    }
]

24 đã được đặt vào môi trường trước đó

Bạn có thể muốn gán một tên tùy chỉnh khác cho đối tượng thay vì sử dụng tên mà tệp đã được đặt tên, điều này rất hữu ích để ngăn việc vô tình ghi đè trong bộ chứa S3. Ví dụ: tên này có thể liên quan đến ID của tài khoản người dùng. Nếu không, bạn nên cung cấp một số phương pháp để trích dẫn đúng tên trong trường hợp có khoảng trắng hoặc các ký tự khó hiểu khác. Ngoài ra, đây là giai đoạn mà bạn có thể kiểm tra tệp đã tải lên để hạn chế quyền truy cập vào một số loại tệp nhất định. Ví dụ: có thể triển khai một kiểm tra đơn giản để chỉ cho phép các tệp

[
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "GET",
            "HEAD",
            "POST",
            "PUT"
        ],
        "AllowedOrigins": [
            "*"
        ],
        "ExposeHeaders": []
    }
]

25 tiếp tục vượt quá thời điểm này

Cuối cùng, trong

[
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "GET",
            "HEAD",
            "POST",
            "PUT"
        ],
        "AllowedOrigins": [
            "*"
        ],
        "ExposeHeaders": []
    }
]

01, tạo chế độ xem chịu trách nhiệm nhận thông tin tài khoản sau khi người dùng đã tải lên hình đại diện, điền vào biểu mẫu và nhấp vào gửi

$ mkdir NodeDirectUploader

6

Chức năng này hiện chỉ là sơ khai mà bạn cần phải hoàn thành để cho phép ứng dụng đọc và lưu trữ thông tin hồ sơ đã gửi và liên kết chính xác thông tin đó với phần còn lại của chi tiết tài khoản người dùng

Chạy ứng dụng

Bây giờ mọi thứ đã sẵn sàng để thực hiện tải trực tiếp lên S3. Để kiểm tra quá trình tải lên, hãy lưu mọi thay đổi và sử dụng

[
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "GET",
            "HEAD",
            "POST",
            "PUT"
        ],
        "AllowedOrigins": [
            "*"
        ],
        "ExposeHeaders": []
    }
]

27 để khởi động ứng dụng

Bạn sẽ cần một Procfile để điều này thành công. Xem Bắt đầu với nút. js trên Heroku để biết thêm thông tin. Ngoài ra, hãy nhớ đặt chính xác các biến môi trường trên máy của bạn trước khi chạy ứng dụng cục bộ

$ mkdir NodeDirectUploader

7

Nhấn

[
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "GET",
            "HEAD",
            "POST",
            "PUT"
        ],
        "AllowedOrigins": [
            "*"
        ],
        "ExposeHeaders": []
    }
]

28 để quay lại lời nhắc. Nếu ứng dụng của bạn trả về lỗi

[
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "GET",
            "HEAD",
            "POST",
            "PUT"
        ],
        "AllowedOrigins": [
            "*"
        ],
        "ExposeHeaders": []
    }
]

29 (hoặc các sự cố khác dựa trên máy chủ), thì hãy khởi động máy chủ của bạn ở chế độ gỡ lỗi và xem kết quả trong trình giả lập Terminal để giúp khắc phục sự cố của bạn

$ mkdir NodeDirectUploader

8

Tóm lược

Bài viết này đề cập đến việc tải lên Amazon S3 trực tiếp từ trình duyệt bằng Node. js để tạm thời ký yêu cầu tải lên. Mặc dù hướng dẫn và mã đồng hành tập trung vào khung Express, nhưng ý tưởng này sẽ dễ dàng chuyển sang các ứng dụng Node khác

Làm cách nào để tải lên tệp excel trong S3 bằng nút js?

Làm cách nào để tải tệp lên S3 bằng NodeJS?

Làm cách nào để tải tệp lên S3 JavaScript?

Làm cách nào để kết nối với nhóm S3 bằng NodeJS?