Upload File dengan AngularJS dan NodeJS Part 2

Melanjutkan artikel sebelumnya yang berjudul Upload File dengan AngularJS dan NodeJS Part 1. Di sini kita mendefinisikan pengaturan penyimpanan Multer. Multer mendukung dua jenis penyimpanan, yaitu. memori dan disk. Kami menggunakan Storage disk untuk tutorial ini, sebagai penyimpanan memori mungkin memberikan masalah jika file terlalu besar atau beberapa file di-upload sangat cepat.

Dalam pengaturan penyimpanan kami memberikan jalur tujuan untuk menyimpan file-file kita. Kami juga mengubah nama file kami. Saya menambahkan datetime untuk nama dalam rangka untuk menghindari duplikasi penamaan konflik. Juga kita perlu menambahkan ekstensi file yang secara default Multer akan menyimpan file tanpa ekstensi

 

var upload = multer({ //multer settings
storage: storage
}).single('file');

 

Sekarang kita membuat contoh Multer dengan memanggil multer dan melewati pilihan kita ke dalamnya. Pada saat yang sama kita menentukan jenis upload, yaitu, jika beberapa file atau tunggal. Dalam kasus kami yang tunggal, dan parameter ('File') biasanya harus nama field input dalam bentuk html kita tetapi dalam kasus kami karena kami menggunakan ng Upload File di AngularJS itu harus sesuai dengan kunci yang memegang file objek dalam permintaan posting.

 

/** API path that will upload the files */
app.post('/upload', function(req, res) {
upload(req,res,function(err){
if(err){
res.json({error_code:1,err_desc:err});
return;
}
res.json({error_code:0,err_desc:null});
})

});

app.listen('3000', function(){
console.log('running on 3000...');
});

 

Selanjutnya kita membuat rute ekspres sebagai '/ upload' untuk meng-upload file kita. Multer juga menyediakan callback di mana kita dapat memeriksa apakah ada kesalahan saat melakukan upload.
Akhirnya kami menciptakan server yang cepat kami.

 

File API

Each uploaded file object contains the following information.

Jalankan Express Server

Untuk memulai server express, pergi ke direktori kerja Anda di cmd dan menjalankan simpul app.js. Saya juga akan bundel yang gulpfile.js dengan kode download, jadi jika Anda menggunakan tegukan untuk otomatisasi, Anda hanya dapat mulai server dengan menjalankan tegukan.ini wraps up pekerjaan di backend, sekarang mari kita beralih ke hal-hal front-end.

Front-end di AngularJS
Kami akan menggunakan modul berkas upload di AngularJS untuk memfasilitasi upload file.
 

Pengaturan

Seiring dengan angular.js kita perlu menyertakan file ng-file-unggah terkait dalam proyek kami.
Menginstal ng-file-upload menggunakan manajer paket atau men-download file yang dibutuhkan membentuk sini.
Sertakan file ke dalam proyek Anda.

 

Mari kita lihat kode lengkap kami maka saya akan menjelaskan setiap blok kode secara rinci. Saya sudah dua file index.html untuk markup dan main.js untuk modul sudut dan kontroler.

 

Home

Angular Node File Upload

 

Single Image with validations
type="file"
ngf-select
ng-model="up.file"
name="file"
ngf-pattern="'image/*'"
accept="image/*"
ngf-max-size="20MB"
/>
Image thumbnail:
*required

File too large
{{up.file.size / 1000000|number:1}}MB: max 20M
submit

{{up.progress}}

 

 

 

Di sini kita telah menyatakan app sudut kami sebagai FileUpload. Kami menggunakan kontroler-sebagai sintaks ng-controller = "MyCtrl sebagai up". Dinamakan formulir kami sebagai nama = "up.upload_form".
Berikutnya kami telah menambahkan jenis input file, yang akan memungkinkan kita untuk memilih file. Di atas itu kami telah menambahkan beberapa arahan yang diberikan oleh ng-file-upload, menjelaskan sebagai berikut.
ngf-pilih
: Menunjukkan jenis seleksi pilih. Drag dan drop juga tersedia.
ngf-pola
: Pola untuk mencocokkan, jenis file. (Misalnya: "'image / *'" untuk gambar)
ngf-max-size
: Ukuran file maksimum diperbolehkan untuk diupload.
Kami juga telah menambahkan ng model sebagai up.file.
Berikutnya kita menampilkan thumbnail dari file yang dipilih menggunakan direktif ngf-thumbnail.
Di bawah ini yang kami telah menambahkan pesan kesalahan-validasi untuk menampilkan. Akhirnya kita memiliki tombol submit dan kami juga menunjukkan kemajuan upload.
Di bagian bawah perpustakaan dimuat dan berkas main.js. app sudut kami

 

angular.module('fileUpload', ['ngFileUpload'])
.controller('MyCtrl',['Upload','$window',function(Upload,$window){
var vm = this;
vm.submit = function(){ //function to call on form submit
if (vm.upload_form.file.$valid && vm.file) { //check if from is valid
vm.upload(vm.file); //call upload function
}
}

vm.upload = function (file) {
Upload.upload({
url: 'http://localhost:3000/upload', //webAPI exposed to upload the file
data:{file:file} //pass file as data, should be user ng-model
}).then(function (resp) { //upload function returns a promise
if(resp.data.error_code === 0){ //validate success
$window.alert('Success ' + resp.config.data.file.name + 'uploaded. Response: ');
} else {
$window.alert('an error occured');
}
}, function (resp) { //catch error
console.log('Error status: ' + resp.status);
$window.alert('Error status: ' + resp.status);
}, function (evt) {
console.log(evt);
var progressPercentage = parseInt(100.0 * evt.loaded / evt.total);
console.log('progress: ' + progressPercentage + '% ' + evt.config.data.file.name);
vm.progress = 'progress: ' + progressPercentage + '% '; // capture upload progress
});
};
}]);

 

Di sini kita telah menciptakan modul aplikasi dan didefinisikan controller kita.
Menyuntikkan ng Upload File sebagai ketergantungan dalam aplikasi kita. FileUpload menyediakan layanan Upload yang kita butuhkan untuk menyuntikkan ke controller kita. Kami menyimpan instance controller di vm.

vm.submit () adalah fungsi yang disebut di submit form. Fungsi ini memvalidasi form dan pada gilirannya panggilan vm.upload ().
The mengekspos layanan Upload dan meng-upload metode, yang menerima url web API dan data lainnya. objek data harus berisi model file yang akan di-upload. Perhatikan kunci dalam data objek yang memegang file harus sesuai dengan parameter di tunggal berkas misalnya multer Anda.

Dalam contoh kita file-nya di tempat kedua.
Kami juga menghitung dan menyimpan kemajuan upload file di variabel vm.progress.
Ini adalah untuk pelaksanaan klien-end kami, Anda dapat menjalankan aplikasi klien pada setiap LocalServer atau server express yang sama, lihat di bawah.

 

Running our App
Catatan. Langkah-langkah ini dapat bervariasi jika Anda tidak mengikuti struktur direktori yang sama, kita adalah sebagai berikut, juga struktur ini hanya untuk tujuan demonstrasi, kami tidak merekomendasikan mengikutinya.

 

Langkah-langkah untuk menjalankan aplikasi demo.

Men-download kode dari sini OR mengkloning repositori kami dengan menjalankan git clone https://github.com/rahil471/file-upload-with-angularjs-and-nodejs.git
Arahkan ke direktori server di app kami menggunakan baris perintah.
Jalankan NPM menginstal
Jika Anda menggunakan tegukan tegukan menjalankan OR jalankan app.js simpul
Terbuka http: // localhost: 3000 di browser Anda