Upload File dengan AngularJS dan NodeJS Part 1

Ada dua bagian dari file upload, akhir klien di mana kita harus memungkinkan pengguna untuk memilih file dan mengirimkannya ke server itu. Pada server kami menerima file tersebut dan menyimpannya ke jalan yang kita inginkan.
Pada artikel ini kita akan belajar untuk melakukan upload file dengan sudut dan simpul. Ini dapat dilihat sebagai dua bagian yang terpisah, jadi misalnya jika Anda bekerja pada AngularJS dengan beberapa lain back-end yaitu tidak Node.js, Anda masih dapat mengambil bantuan dari artikel ini untuk bagian sudut dari itu dan sebaliknya.

Prasyarat
Artikel ini mengasumsikan Anda telah bekerja dengan AngularJS dan Node mengungkapkan js dan memiliki pengetahuan dasar tentang mereka.

Mari kita mulai
Kami akan membagi ini menjadi dua bagian, sisi server dengan node dan akhir klien dengan AngularJS.

Backend dengan NodeJS
Kami akan menggunakan multer untuk menangani file upload di aplikasi ekspres kami. Multer adalah paket NodeJS middleware populer untuk menangani upload file. Mari kita lihat berkas Server lengkap kami, saya akan menjelaskan bagian itu nanti.

 

app.js

var express = require('express'); var app = express(); var bodyParser = require('body-parser'); var multer = require('multer'); app.use(function(req, res, next) { res.header("Access-Control-Allow-Origin", "http://localhost"); res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept"); next(); }); /** Serving from the same express Server No cors required */ app.use(express.static('../client')); app.use(bodyParser.json()); var storage = multer.diskStorage({ //multers disk storage settings destination: function (req, file, cb) { cb(null, './uploads/') }, filename: function (req, file, cb) { var datetimestamp = Date.now(); cb(null, file.fieldname + '-' + datetimestamp + '.' + file.originalname.split('.')[file.originalname.split('.').length -1]) } }); var upload = multer({ //multer settings storage: storage }).single('file'); /** 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...'); });

 

package.json

{ "name": "expapp", "version": "1.0.0", "description": "", "main": "app.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "", "license": "ISC", "devDependencies": { "gulp": "3.9.0", "gulp-develop-server": "0.5.0", "gulp-jshint": "1.12.0" }, "dependencies": { "body-parser": "1.14.1", "express": "4.13.3", "fs": "0.0.2", "multer": "1.1.0" } }

 

Untuk menginstal dependensi hanya menjalankan NPM menginstal. Atau Anda dapat menginstal setiap modul independen dan simpan ke package.json Anda.
 

Penjelasan

Bagian ini terdiri penjelasan masing-masing blok kode dalam file app.js kami.
Di bagian atas kita membutuhkan modul simpul kami.

 

app.use(function(req, res, next) { //allow cross origin requests
res.setHeader("Access-Control-Allow-Methods", "POST, PUT, OPTIONS, DELETE, GET");
res.header("Access-Control-Allow-Origin", "http://localhost");
res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
next();
});

/** Serving from the same express Server
No cors required */
app.use(express.static('../client'));
app.use(bodyParser.json());

 

Di sini kita melakukan dua hal, kita membiarkan server yang cepat kami menerima permintaan lintas asal dari server lain. (Dalam hal ini localhost: 80) Atau kami meminta ekspres untuk mengekspos folder client sebagai jalan statis, dengan cara ini kita bisa menjalankan kode AngularJS klien kami pada server yang sama ekspres (cross-asal tidak akan diperlukan jika kita mengikuti ini).

var storage = multer.diskStorage({ //multers disk storage settings
destination: function (req, file, cb) {
cb(null, './uploads/')
},
filename: function (req, file, cb) {
var datetimestamp = Date.now();
cb(null, file.fieldname + '-' + datetimestamp + '.' + file.originalname.split('.')[file.originalname.split('.').length -1])
}
});