Upload File dengan AngularJS dan NodeJS Part 2

 

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.