Ada beberapa metode untuk mengunggah file dan menyimpannya di Server. Dalam tutorial ini, kami akan mengimplementasikan cara membaca file menggunakan Vanilla Javascript, menyimpan data biner file di MySQL DB menggunakan Node. JS, dan melihatnya
Implementasi kode JS akan sama untuk semua framework JS. Saya menganggap Anda memiliki Node.js. Pengetahuan pengembangan dasar JS dan phpMyAdmin terinstal di sistem Anda
Mari selami implementasi
Buat Proyek
Instal modul berikut
npm saya mengungkapkan ejs mysql
npm i -D nodemon
Struktur proyek harus seperti berikut
Penerapan
Jalankan perintah SQL berikut di phpMyAdmin untuk membuat tabel
Kami akan menggunakan tipe data LONGBLOB untuk menyimpan data biner file. LONGBLOB adalah jenis BLOB[Binary Large Object] dengan panjang maksimal 4294967295 karakter
Mari siapkan kode API untuk merender halaman HTML dan menyimpan data file dalam DB;
Tempatkan kode di bawah ini di server. file js
Di objek config, tempatkan pengguna MySQL, kata sandi, dan nama database terkait
- DAPATKAN "/". - Ini akan merender halaman untuk mengunggah file
- POSTING "/toko". - Ini akan mengekstrak data file dari Badan Permintaan dan menyimpannya di Database
- DAPATKAN "/gambar/. Indo". - Ini akan mengambil data file dari Database menggunakan id dari params dan mengirim ke UI untuk ditampilkan
Mari terapkan kode sisi UI
Tempatkan kode di bawah ini di index. ejs
Mari kita lihat apa yang terjadi pada kode di atas
Saya telah melampirkan acara onchange ke bidang input file yang dipicu saat memuat file
Objek FileReader memungkinkan aplikasi web untuk membaca file atau buffer data mentah secara asinkron dari komputer pengguna yang dapat diambil dari objek File atau Blob
Objek file dapat diperoleh dari objek FileList yang dikembalikan sebagai hasil dari pemilihan file dari elemen input
FileReader hanya dapat mengakses konten file yang telah dimuat pengguna melalui kolom Input atau drag and drop. Itu tidak dapat mengakses file melalui nama path
Ini memiliki beberapa event handler dan metode, di sini kita menggunakan tiga di antaranya
- FileReader. memuat. - Acara ini dipicu setiap kali operasi pembacaan berhasil diselesaikan
- FileReader. onerror. - Peristiwa ini dipicu setiap kali operasi pembacaan menemui kesalahan
- FileReader. bacaAsDataURL[]. - Mulai membaca Blob atau File yang ditentukan, setelah selesai, data atribut hasil. URL yang mewakili data file
Setelah menerima respons id file yang disimpan dari server, kami menghapus kolom input dan mengarahkan pengguna ke "/ image/{fileid}" di mana pengguna akan dapat melihat gambar yang dimuat
Tempatkan kode di bawah ini di imageView. ejs
In this file, we recieve data from /image/:id route.
Sekarang mulai npm, buka http. // localhost. 3000
Unggah file dan Anda akan dialihkan ke halaman lain tempat Anda dapat melihat gambar yang diunggah
Terkadang berguna untuk mengumpulkan data dari pengguna situs web Anda dan menyimpan informasi ini di database MySQL. Kami telah melihat Anda dapat mengisi database menggunakan PHP, sekarang kami akan menambahkan kepraktisan yang memungkinkan data ditambahkan melalui formulir web yang mudah digunakan
Hal pertama yang akan kita lakukan adalah membuat halaman dengan formulir. Untuk demonstrasi kami, kami akan membuat yang sangat sederhana
_602
dari 07
Sisipkan Ke - Menambahkan Data dari Formulir
Selanjutnya, Anda perlu membuat proses. php, halaman tempat formulir kami mengirimkan datanya. Berikut adalah contoh cara mengumpulkan data ini untuk dikirim ke database MySQL
Seperti yang Anda lihat, hal pertama yang kami lakukan adalah menetapkan variabel ke data dari halaman sebelumnya. Kami kemudian hanya menanyakan database untuk menambahkan informasi baru ini
Tentu saja, sebelum kita mencobanya kita perlu memastikan tabel tersebut benar-benar ada. Menjalankan kode ini harus membuat tabel yang dapat digunakan dengan file sampel kami
CREATE TABLE data [name VARCHAR[30], email VARCHAR[30], location VARCHAR[30]];
03
dari 07
Tambahkan Unggahan File
Sekarang Anda tahu cara menyimpan data pengguna di MySQL, jadi mari selangkah lebih maju dan pelajari cara mengunggah file untuk disimpan. Pertama, mari buat database sampel kita
CREATE TABLE uploads [id INT[4] NOT NULL AUTO_INCREMENT PRIMARY KEY, description CHAR[50], data LONGBLOB, filename CHAR[50], filesize CHAR[50], filetype CHAR[50] ];
_Hal pertama yang harus Anda perhatikan adalah kolom bernama id yang disetel ke AUTO_INCREMENT. Apa arti tipe data ini adalah bahwa ia akan menghitung untuk menetapkan setiap file ID file unik mulai dari 1 dan terus ke 9999 [karena kami menentukan 4 digit]. Anda juga mungkin akan memperhatikan bahwa bidang data kita disebut LONGBLOB. Ada banyak jenis BLOB seperti yang telah kami sebutkan sebelumnya. TINYBLOB, BLOB, MEDIUMBLOB, dan LONGBLOB adalah opsi Anda, tetapi kami menyetelnya ke LONGBLOB untuk memungkinkan file sebesar mungkin
Selanjutnya, kami akan membuat formulir untuk memungkinkan pengguna mengunggah file-nya. Ini hanya bentuk sederhana, jelas, Anda bisa mendandaninya jika Anda mau
_7Pastikan untuk memperhatikan enctype, ini sangat penting
04
dari 07
Menambahkan Upload File ke MySQL
Selanjutnya, kita perlu benar-benar membuat unggahan. php, yang akan mengambil file pengguna kami dan menyimpannya di database kami. Di bawah ini adalah contoh pengkodean untuk unggahan. php
File ID: $id
";
print "
_8
_9 CREATE TABLE data [name VARCHAR[30], email VARCHAR[30], location VARCHAR[30]];
0 CREATE TABLE data [name VARCHAR[30], email VARCHAR[30], location VARCHAR[30]];
1Pelajari lebih lanjut tentang apa yang sebenarnya dilakukan di halaman berikutnya
05
dari 07
Menambahkan Unggahan Dijelaskan
Hal pertama yang sebenarnya dilakukan oleh kode ini adalah menghubungkan ke database [Anda perlu mengganti ini dengan informasi database Anda yang sebenarnya. ]
Selanjutnya, ia menggunakan fungsi ADDSLASHES. Apa yang dilakukan adalah menambahkan garis miring terbalik jika diperlukan ke dalam nama file sehingga kami tidak akan mendapatkan kesalahan saat kami menanyakan database. Misalnya, jika kita memiliki File Billy. gif, ini akan mengubahnya menjadi File Billy. gif. FOPEN membuka file dan FREAD adalah file aman biner yang dibaca sehingga ADDSLASHES diterapkan ke data di dalam file jika diperlukan
Selanjutnya, kami menambahkan semua informasi yang dikumpulkan formulir kami ke dalam basis data kami. Anda akan melihat kami mencantumkan bidang terlebih dahulu, dan nilai kedua sehingga kami tidak secara tidak sengaja mencoba memasukkan data ke bidang pertama kami [bidang ID penugasan otomatis. ]
Terakhir, kami mencetak data untuk ditinjau pengguna
06
dari 07
Mengambil File
Kami sudah belajar cara mengambil data biasa dari database MySQL kami. Demikian juga, menyimpan file Anda di database MySQL tidak akan praktis jika tidak ada cara untuk mengambilnya kembali. Cara yang akan kita pelajari untuk melakukan ini adalah dengan menetapkan setiap file URL berdasarkan nomor ID mereka. Jika Anda ingat saat kami mengunggah file, kami secara otomatis menetapkan nomor ID untuk setiap file. Kami akan menggunakannya di sini saat kami memanggil file kembali. Simpan kode ini sebagai unduhan. php
Cara mengambil file Anda, kami arahkan ke browser Anda. http. // www. situs Anda. com/unduh. php?id=2 [ganti 2 dengan ID file apa pun yang ingin Anda unduh/tampilkan]
Kode ini adalah dasar untuk melakukan banyak hal. Dengan ini sebagai dasar, Anda dapat menambahkan kueri basis data yang akan mencantumkan file, dan meletakkannya di menu tarik-turun untuk dipilih orang. Atau Anda dapat mengatur ID menjadi nomor yang dibuat secara acak sehingga grafik yang berbeda dari database Anda ditampilkan secara acak setiap kali seseorang berkunjung. Kemungkinannya tidak terbatas
07
dari 07
Menghapus File
Berikut adalah cara yang sangat sederhana untuk menghapus file dari database. Anda ingin berhati-hati dengan yang satu ini. Simpan kode ini sebagai hapus. php
Seperti kode kami sebelumnya yang mengunduh file, skrip ini memungkinkan file dihapus hanya dengan mengetikkan URL-nya. http. //situsmu. com/hapus. php?id=2 [ganti 2 dengan ID yang ingin Anda hapus. ] Untuk alasan yang jelas, Anda ingin berhati-hati dengan kode ini. Ini tentu saja untuk demonstrasi, ketika kami benar-benar membuat aplikasi, kami ingin memasang pengamanan yang menanyakan pengguna apakah mereka yakin ingin menghapus, atau mungkin hanya mengizinkan orang dengan kata sandi untuk menghapus file. Kode sederhana ini adalah dasar yang akan kita buat untuk melakukan semua hal itu
Kutip Artikel ini
Format
Kutipan Anda
Bradley, Angela. "Menyimpan Data dan File yang Dikirim Pengguna di MySQL. "PikirCo. https. // www. thinkco. com/storing-data-and-files-in-mysql-2694013 [diakses 28 Januari 2023]