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" } }