Istnieją trzy główne sposoby obsługi przesyłania plików w Node.js: zapisywanie obrazów bezpośrednio na serwerze, zapisywanie obrazu danych binarnych lub łańcuchów base64 do swojej bazy danych oraz za pomocą kubełków Amazon Web Service (AWS) S3 do zapisywania i zarządzania obrazy.
Tutaj dowiesz się, jak używać Multera, oprogramowania pośredniczącego Node.js, do przesyłania i zapisywania obrazów bezpośrednio na serwerze w aplikacjach Node.js w kilku krokach.
Krok 1: Konfigurowanie środowiska programistycznego
Kod użyty w tym projekcie jest dostępny w formacie Repozytorium GitHub i jest darmowy do użytku na licencji MIT.
Najpierw utwórz folder projektu i przejdź do niego, uruchamiając następujące polecenie:
mkdir multer-samouczek
płyta CD samouczek
Następnie zainicjuj npm w katalogu projektu, uruchamiając:
npm init -y
Następnie musisz zainstalować niektóre zależności. Zależności wymagane w tym samouczku obejmują:
- Wyrazić: Express to framework Node.js który zapewnia solidny zestaw funkcji dla aplikacji internetowych i mobilnych. Ułatwia tworzenie aplikacji zaplecza za pomocą Node.js.
- Multera: Multer to ekspresowe oprogramowanie pośrednie, które upraszcza przesyłanie i zapisywanie obrazów na serwerze.
Zainstaluj pakiety z menedżer pakietów węzłów biegiem:
np zainstalować ekspresowy multi
Następnie utwórz plik aplikacja.js w katalogu głównym projektu i dodaj poniższy blok kodu, aby utworzyć podstawowy serwer Express:
//app.js
konst ekspres = wymagać('wyrazić');
konst aplikacja = ekspres();
konst port = proces.env. PORT || 3000;
app.listen (port, ()=>{
konsola.dziennik(`Aplikacja nasłuchuje na porcie ${port}`);
});
Krok 2: Konfiguracja Multera
Najpierw importuj mnożyć w Twoim aplikacja.js plik.
konst mnożyć = wymagać(„multer”);
mnożyć wymaga silnika pamięci masowej, który zawiera informacje o katalogu, w którym będą przechowywane przesłane pliki, oraz o tym, jak pliki zostaną nazwane.
A mnożyć silnik pamięci masowej jest tworzony przez wywołanie metody DyskPrzechowywanie metoda na importowanym mnożyć moduł. Ta metoda zwraca a StorageEngine implementacja skonfigurowana do przechowywania plików w lokalnym systemie plików.
Wymaga obiektu konfiguracyjnego o dwóch właściwościach: miejsce docelowe, który jest ciągiem znaków lub funkcją określającą miejsce przechowywania przesłanych obrazów.
Druga właściwość, Nazwa pliku, to funkcja określająca nazwy przesyłanych plików. Przyjmuje trzy parametry: wymaganie, pliki wywołanie zwrotne (cb). wymaganie jest Ekspres Wniosek obiekt, plik jest obiektem zawierającym informacje o przetwarzanym pliku, oraz cb to wywołanie zwrotne, które określa nazwy przesyłanych plików. Funkcja wywołania zwrotnego przyjmuje błąd i nazwę pliku jako argumenty.
Dodaj poniższy blok kodu do swojego aplikacja.js plik, aby utworzyć silnik pamięci masowej:
//Ustawianie mechanizmu przechowywania
konst storageEngine = multer.diskStorage({
miejsce docelowe: "./obrazy",
nazwa pliku: (req, plik, cb) => {
cb(zero, `${Data.Teraz()}--${plik.oryginalna nazwa}`);
},
});
W powyższym bloku kodu ustawiasz miejsce docelowe własność do”./obrazy”, w ten sposób obrazy będą przechowywane w katalogu twojego projektu w pliku obrazy teczka. Następnie w oddzwonieniu zdałeś zero jako błąd i ciąg szablonu jako nazwę pliku. Ciąg szablonu składa się z sygnatury czasowej wygenerowanej przez wywołanie data.teraz() aby zapewnić, że nazwy obrazów są zawsze unikalne, dwa łączniki oddzielające nazwę pliku i znacznik czasu oraz oryginalną nazwę pliku, do której można uzyskać dostęp z plik obiekt.
Ciągi wynikowe z tego szablonu będą wyglądać następująco: 1663080276614--przyklad.jpg.
Następnie musisz zainicjować mnożyć z silnikiem magazynowym.
Dodaj poniższy blok kodu do swojego aplikacja.js plik, aby zainicjować multer z silnikiem pamięci masowej:
//inicjowanie multera
konst prześlij = mnożnik ({
przechowywanie: storageEngine,
});
mnożyć zwraca instancję Multer, która zapewnia kilka metod generowania oprogramowania pośredniego, które przetwarza przesłane pliki dane wieloczęściowe/formularza format.
W powyższym bloku kodu przekazujesz obiekt konfiguracji z a składowanie właściwość ustawiona na silnik pamięci masowej, który jest mechanizmem pamięci masowej utworzonym wcześniej.
Obecnie Twoja konfiguracja Multera jest zakończona, ale nie ma reguł sprawdzania poprawności, które zapewniałyby, że na serwerze można zapisywać tylko obrazy.
Krok 3: Dodawanie reguł sprawdzania poprawności obrazu
Pierwszą regułą sprawdzania poprawności, którą możesz dodać, jest maksymalny dozwolony rozmiar obrazu, który ma zostać przesłany do Twojej aplikacji.
Zaktualizuj swój obiekt konfiguracji multera za pomocą poniższego bloku kodu:
konst prześlij = mnożnik ({
przechowywanie: storageEngine,
granice: { rozmiar pliku: 1000000 },
});
W powyższym bloku kodu dodałeś a granice właściwość do obiektu konfiguracji. Ta właściwość jest obiektem, który określa różne limity danych przychodzących. Ustawiłeś rozmiar pliku właściwość, za pomocą której ustawiany jest maksymalny rozmiar pliku w bajtach 1000000, co odpowiada 1 MB.
Kolejną regułą sprawdzania poprawności, którą możesz dodać, jest filtr plików właściwość, opcjonalna funkcja do kontrolowania, które pliki są przesyłane. Ta funkcja jest wywoływana dla każdego przetwarzanego pliku. Ta funkcja przyjmuje te same parametry co funkcja Nazwa pliku funkcjonować: wymaganie, plik, I cb.
Aby Twój kod był czystszy i bardziej nadawał się do ponownego użycia, streścisz całą logikę filtrowania w funkcji.
Dodaj poniższy blok kodu do swojego aplikacja.js file, aby zaimplementować logikę filtrowania plików:
konst ścieżka = wymagać("ścieżka");
konst sprawdź typ pliku = funkcjonować (plik, kb) {
//Dozwolone rozszerzenia plików
konst typy plików = /jpeg|jpg|png|gif|svg/;
//sprawdzać rozszerzenie nazwy
konst extName = fileTypes.test (ścieżka.extname (file.originalname).toLowerCase());
konst mimeType = fileTypes.test (file.mimetype);
if (Typ MIME && extNazwa) {
powrót cb(zero, PRAWDA);
} w przeciwnym razie {
cb("Błąd: Możesz przesyłać tylko obrazy!!");
}
};
The sprawdź typ pliku funkcja przyjmuje dwa parametry: plik I cb.
W powyższym bloku kodu zdefiniowałeś a typy plików zmienna przechowująca wyrażenie regularne z dozwolonymi rozszerzeniami plików graficznych. Następnie zadzwoniłeś do test metoda na wyrażeniu regularnym.
The test metoda sprawdza dopasowanie w przekazanym łańcuchu i zwraca PRAWDA Lub FAŁSZ w zależności od tego, czy znajdzie dopasowanie. Następnie przekazujesz przesłaną nazwę pliku, do którego możesz uzyskać dostęp plik.oryginalna nazwa, do modułu ścieżki nazwa zewnętrzna metoda, która zwraca do niej rozszerzenie ścieżki łańcucha. Na koniec łączysz JavaScript do małych liter string do wyrażenia, aby obsłużyć obrazy z nazwami rozszerzeń pisanymi wielkimi literami.
Samo sprawdzenie nazwy rozszerzenia nie wystarczy, ponieważ nazwy rozszerzeń można łatwo edytować. Aby upewnić się, że przesyłane są tylko obrazy, musisz sprawdzić plik typu MIME zbyt. Możesz uzyskać dostęp do pliku typ MIME nieruchomość przez plik.typ MIME. Więc sprawdzasz tzw typ MIME nieruchomość za pomocą test metoda, tak jak w przypadku nazw rozszerzeń.
Jeśli dwa warunki zwrócą wartość true, zwracasz wywołanie zwrotne za pomocą zero i true lub zwracasz wywołanie zwrotne z błędem.
Na koniec dodajesz tzw filtr plików właściwość do konfiguracji multera.
konst prześlij = mnożnik ({
przechowywanie: storageEngine,
granice: { rozmiar pliku: 10000000 },
fileFilter: (req, file, cb) => {
checkFileType (plik, cb);
},
});
Krok 4: Używanie Multera jako Express Middleware
Następnie musisz zaimplementować procedury obsługi tras, które będą obsługiwać przesyłanie obrazów.
Multer może obsłużyć zarówno przesyłanie pojedynczych, jak i wielu obrazów, w zależności od konfiguracji.
Dodaj poniższy blok kodu do swojego aplikacja.js plik, aby utworzyć procedurę obsługi tras dla przesyłania pojedynczych obrazów:
aplikacja.post("/single", prześlij.pojedynczy("obraz"), (req, res) => {
Jeśli (wymaganie.plik) {
wyślij ponownie ("Pomyślnie przesłano pojedynczy plik");
} w przeciwnym razie {
res.status (400).send("Prześlij prawidłowy obraz");
}
});
W powyższym bloku kodu nazwałeś pojedynczy metoda na wgrywać zmienna, która przechowuje twoją konfigurację multera. Ta metoda zwraca oprogramowanie pośredniczące, które przetwarza „pojedynczy plik” powiązany z danym polem formularza. Następnie zdałeś obraz jako pole formularza.
Na koniec sprawdź, czy plik został przesłany przez wymaganie obiekt w plik nieruchomość. Jeśli tak, wysyłasz wiadomość o powodzeniu, w przeciwnym razie wysyłasz wiadomość o błędzie.
Dodaj poniższy blok kodu do swojego aplikacja.js plik, aby utworzyć procedurę obsługi tras dla wielu przesyłanych obrazów:
aplikacja.post("/multiple", prześlij.tablica("obrazy", 5), (req, res) => {
Jeśli (wymaganie.akta) {
wyślij ponownie ("Pomyślnie przesłano wiele plików");
} w przeciwnym razie {
res.status (400).send("Prześlij prawidłowe obrazy");
}
});
W powyższym bloku kodu nazwałeś szyk metoda na wgrywać zmienna, która przechowuje twoją konfigurację multera. Ta metoda przyjmuje dwa argumenty — nazwę pola i maksymalną liczbę — i zwraca oprogramowanie pośredniczące, które przetwarza wiele plików o tej samej nazwie pola. Potem zdałeś obrazy jako udostępnione pole formularza i 5 jako maksymalną liczbę obrazów, które można przesłać jednocześnie.
Zalety korzystania z Multera
Używanie Multera w aplikacjach Node.js upraszcza skomplikowany proces przesyłania i zapisywania obrazów bezpośrednio na serwerze. Multer jest również oparty na busboy, module Node.js do analizowania przychodzących danych formularzy, dzięki czemu jest bardzo wydajny do analizowania danych formularzy.