Cách tải lên nhiều hình ảnh trong mongodb bằng nút js

Question

Xin chào và chào mừng đến với Stack Overflow

Nội dung chính Show

ứng dụng của chúng tôi
Chạy ứng dụng
nâng cao hơn nữa
Học cao hơn
Sự kết luận
Làm cách nào để tải lên nhiều hình ảnh trong nút js?
Làm cách nào để tải tệp lên MongoDB bằng nút js?
Làm cách nào để tải lên nhiều tệp trong nodejs?
Bạn có thể tải ảnh lên MongoDB không?

trong dòng này

app.post('/', upload.single('image'), (req, res, next) => {

thay vì upload.single bạn có thể sử dụng

upload.array('image', 12)

Vui lòng kiểm tra tài liệu multer để biết tất cả các chi tiết

https. //www. npmjs. com/gói/bộ trộn

Chúng tôi sử dụng nút. js để xây dựng phần phụ trợ của ứng dụng web và một trong những trường hợp sử dụng thường xuất hiện là tính năng tải tệp lên. Trong hướng dẫn này, chúng ta sẽ tìm hiểu và xây dựng một ứng dụng có thể cho phép người dùng tải lên nhiều tệp bằng Node. js

TẢI XUỐNG BẢN demo TRỰC TIẾP

ứng dụng của chúng tôi

Tôi sẽ phát triển ứng dụng giống như tôi đã thực hiện trong phần hướng dẫn trước với một số thay đổi mã bổ sung giúp tải lên nhiều tệp

Chúng tôi sẽ sử dụng gửi FORM cơ bản cùng với plugin jQuery gửi Ajax để làm cho nó không đồng bộ. Đây là gói của chúng tôi. tập tin json

bưu kiện. json

{
"tên". "file_upload",
"phiên bản": "0. 0. 1",
"phần phụ thuộc". {
"body-parser". "^1. 14. 2",
"express". "4. 13. 3",
"bộ cộng". "1. 1. 0"
},
" . : {
"nên". "~7. 1. 0",
"mocha". "~2. 3. 3",
"siêu hạng". "~1. 1. 0"
}
}

Chạy lệnh sau để cài đặt các phụ thuộc

cài đặt npm

Đây là tệp Máy chủ của chúng tôi với hỗ trợ tải lên nhiều tệp

Người phục vụ. js

Dòng duy nhất bạn cần tập trung vào là dòng này

var upload = multer ({ storage : bộ nhớ }) . mảng('Ảnh người dùng',2);

Ở đây hơn là. single() chúng tôi đang sử dụng. mảng (bộ chọn, fileLimit) của Multer. Multer sẽ chấp nhận mảng tệp giới hạn tối đa 2 tệp mỗi lần. Tất nhiên bạn có thể tăng số lượng khi bạn cần. Phần còn lại của mã giống như hướng dẫn trước

Đây là tệp HTML của chúng tôi

Mục lục. html

< html >
<head>
<title>File upload Node.tiêu đề >
đầu ><
<body>
<form id="uploadForm"
enctype="multipart/form-data"
action="/api/photo"
method="post">
<input type="file" name="userPhoto" multiple />
<input type="submit" value="Upload Image" name="submit">
<input type='text' id='random' name='random'><br>
<span id = "status">span>
form>
body>
html>

Đây là mã JavaScript của chúng tôi mà chúng tôi đặt trong cùng một tệp HTML. Bạn có thể đặt nó trong tập tin khác nhau. Đặt mã này bên dưới thẻ đóng của BODY

mục lục. html

< script src ="http. // ajax. googleapis. com/ajax/libs/jquery/1. 7. 1/jquery. tối thiểu. js">tập lệnh >
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery.form/3.51/jquery.form.min.js">tập lệnh >
<script>
$(document).sẵn sàng(chức năng() . {
$('#uploadForm').gửi(hàm() . {
$("#status").trống() . văn bản("Tệp đang tải lên. ");
$ ( . ).ajaxSubmit({
lỗi . hàm( xhr ) { . '
status('Error: ' + xhr. trạng thái);
}< . ,
success: chức năng( phản hồi ) { .
console.log( phản hồi )
$ . ("#status").trống() . văn bản( phản hồi );
}
});
return false;
});
});
script>

Khi gửi Biểu mẫu, chúng tôi sẽ dừng làm mới trang bằng cách trả về FALSE và gọi API bằng cách sử dụng ajaxSubmit(). Bạn có thể Thêm mã này vào tệp riêng biệt và thêm mã bên dưới jquery. biểu mẫu hoặc sao chép và dán ngay bên dưới dòng này

Chạy ứng dụng

Để chạy ứng dụng, hãy chuyển sang thư mục dự án và gõ lệnh sau

máy chủ nút. js

Truy cập máy chủ cục bộ. 3000 để xem ứng dụng. Chọn nhiều tệp từ cửa sổ lựa chọn và xem bảng điều khiển

nâng cao hơn nữa

Nếu bạn muốn có quyền kiểm soát khác cho tệp thay vì kiểm soát HTML đơn lẻ thì bạn cần xác định quyền kiểm soát nhiều tệp trong HTML có cùng tên để nhận ra Multer rằng đó là mảng tệp. Đây là cách bạn có thể làm điều này. Hiện tại chúng tôi đang sử dụng cái này

< đầu vào loại="tệp" name="userPhoto" multiple/>

Bạn có thể viết tương tự như thế này

< đầu vào loại="tệp" name="userPhoto"/>
<input type="file" name="userPhoto"/>

Không cần thay đổi mã back-end cho thay đổi trên

Học cao hơn

Tải tệp lên bằng Node. js
Tải lên tệp Ajax trong Node. js
Nút. js MySQL Tutorial
Hệ thống thông báo đẩy HTML5 sử dụng Nodejs MySQL Socket. io

Sự kết luận

Multer là một trong những mô-đun nút dễ sử dụng mà bạn có thể sử dụng với Express để tải tệp lên. Nó cho phép bạn thêm nhiều xác thực khác nhau và hỗ trợ tải lên một tệp cũng như nhiều tệp

Làm cách nào để tải lên nhiều hình ảnh trong nút js?

Hãy làm theo các bước sau để tải nhiều tệp lên bằng nút js express. .

Bước 1 – Tạo ứng dụng Node JS

Bước 2 – Cài đặt phụ thuộc Express và Multer

Bước 3 – Tạo máy chủ. tập tin js

Bước 4 – Tạo nhiều biểu mẫu tải lên tệp/hình ảnh

Bước 5 – Khởi động máy chủ ứng dụng Node Express Js

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

Bước 1. Xây dựng một nút. Ứng dụng JS. Chúng ta cần một nút. .

Bước 2. Tải tệp của bạn lên FileU. Sau khi xây dựng Nút của bạn. JS, bạn cần tải các tệp của mình lên FileU. .

Bước 3. Lưu trữ tệp của bạn trong MongoDB thông qua GridFS. Theo mặc định, MongoDB chỉ cho phép bạn tải lên các tệp dưới 16 MB

Làm cách nào để tải lên nhiều tệp trong nodejs?

Cách tải lên một hoặc nhiều tệp trong nút. .

Hãy tạo một dự án express mới bằng trình tạo express. .

Cài đặt gói multer và uniqid npm. .

tạo một thư mục helpers và bên trong thư mục này tạo một trình tải lên tệp. js. .

Tạo một thư mục lưu trữ và bên trong thư mục này tạo thư mục tải lên

Bạn có thể tải ảnh lên MongoDB không?

Không, MongoDB không phải là nơi tốt để lưu trữ tệp . Nếu bạn muốn lưu trữ tệp, bạn nên sử dụng các kho lưu trữ như Amazon S3 hoặc Google Could Storage. Cách thực hành tốt là lưu trữ các tệp trong bộ lưu trữ và sau đó chỉ lưu URL của hình ảnh đã tải lên trong MongoDB.

programming mongodb