在Angular 7和Node JS中上传文件

在本教程中，我们将看到如何在Angular 7和Node JS中创建一个用于文件上传的应用程序。为此，我们将使用一个名为的npm库 强大 在NodeJS应用程序中。

创建角度服务

let’s first create a service method which will collect the two parameters which both have type File. In my case I am sending two different file i.e Audio 和 Image, but you can use array of 档案 if you want so.
因此，我们的服务文件将如下所示：

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { environment } from 'src/environments/environment';
@Injectable()
export class AudioService {
  HttpUploadOptions = {
    headers: new HttpHeaders({ Accept: 'application/json' }),
  };
  constructor(private http: HttpClient) {}
  uploadAudioFiles(Audiofile: File, imageFile: File) {
    const payload = new FormData();
    payload.append('audio', Audiofile);
    payload.append('image', imageFile);
    // environment.uploadAudioByFile : Your Rest API EndPoint To Upload Files
    return this.http
      .post(environment.uploadAudioByFile, payload, this.HttpUploadOptions)
      .pipe(map(result => result));
  }
}

因此，我们创建了有效负载，并从参数中添加了图像和音频文件作为输入参数，您可以从任何组件文件中进行设置。
Also we have set header as application/json.
现在，让我们跳到将在Node.js应用程序中实现的主要概念。

创建Nodejs项目

因此，首先将创建一个项目并安装所需的软件包以管理我们的文件上传，因此让我们从创建一个新目录开始。

mkdir node_fileupload
cd node_fileupload

then init to create

npm init

# package name: (node_fileupload)
# version: (1.0.0)
# description: file upload using node 和 强大
# entry point: (index.js) index.js
# ...

这将创建一个 package.json 文件作为程序包管理器的启动文件

安装必需的软件包

我们将安装基本软件包，例如 expressjs, 人体解析器, 科尔斯 （允许跨源访问） 创建我们的休息服务器和最终 强大 在服务器上接收文件时管理文件。

npm install -save  express 人体解析器 科尔斯 强大

如果要开发以观看文件更改，则可以安装 Nodemon

npm install nodemon --save-dev

现在我们来设置我们的 package.json file in which we will create a script which will run our node application inside script we will create a dev script with the command as mention below:

{
    "name": "node_fileupload",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
        "test": "",
        "dev": "PORT=3000 nodemon index.js"  /* set process.env.PORT : 3000 */
    },
    "author": "",
    "license": "MIT",
    "dependencies": {
        "express": "^4.17.0",
        "人体解析器": "^1.19.0",
        "科尔斯": "^2.8.5",
        "强大": "^1.2.1"
    },
    "devDependencies": {
        "nodemon": "^1.19.0"
    }
}

设置Nodejs（根文件）

设置主 index.js 文件将启动并服务于我们的应用程序，我们还将设置一些参数和应用程序的基本路由。
首先，我们将所有必需的包导入到我们的 index.js 文件。

const express = require('express');
const app = express();
const 科尔斯 = require('cors');
const bodyParser = require('body-parser');
...

现在将配置正文解析器，它将设置要接收的最大数据集。

...
const app = express();
const bodyParser = require('body-parser');
...
// Data Limit
app.use(bodyParser.urlencoded({ limit: '50mb', extended: true }));
app.use(bodyParser.json({ limit: '50mb' }));

之后，我们将创建一个名为public的目录，该目录将是静态文件夹，并将上载该目录中的所有文件。
静态的是，该节点不会在路由上用作其应用程序的一部分。

...
const app = express();
...
// static Folders
app.use(cors(), express.static('public'));

在里面 上市 文件夹将创建一个 资产 folder in which we will upload our 档案 so when we will access those 档案 the path will not contain /public/ because we declared as a static folder so our URL will be access 127.0.0.1:3000/assets/image.png

之后，我们将创建一个基本路径终结点，所有api都将在该终结点上公开。

...
const app = express();
...
// REST API's
app.use('/api', 科尔斯(), require('./controllers'));   // Will create a controller in some time.

最后，我们将创建一个应用侦听器，该侦听器将为我们的应用提供服务

...
const app = express();
...
// PORT
app.listen(process.env.PORT, () => {
    console.log('Server is runnnig on port ' + process.env.PORT);
});

设定控制器

现在在我们的根文件夹中将创建一个 控制器 文件夹，控制器的根文件将在其中创建一个 index.js 这将为您的应用管理多条路线，但我们仅提供一条申请路线。

const express = require('express');
const router = express.Router();

router.use('/audio', require('./audio'));  // seperate controller for file upload
module.exports = router;  // export all 控制器 route to main index.js in root folder

然后在 控制器 文件夹将创建一个 音讯.js 文件发送错误或成功数据作为响应，我们将使用等待响应的回调函数。

const express = require('express');
const router = express.Router();
const 音讯 = require('../models/audio/uploadAudio'); // Methods to upload file
/*  @Upload Files Route  */
router.post('/uploadAudioByFile', (req, res) => {
    音讯.byFile(req, res, (err, data) => {
        // @err : Boolean , @data : response Data or message
        if (err) {
            res.status(data.statusCode).json(data); // send erroe response with status 和 err message
        } else {
            res.status(data.statusCode).json(data); // send success response with status 和 data
        }
    });
});
module.exports = router;

因此我们的Rest API将是 http://127.0.0.1:3000/api/audio/uploadAudioByFile

设定模型

现在在我们的根文件夹中将创建一个 楷模 文件夹，其中将包含一些方法来处理来自控制器的所有请求。
在模型内部，将创建另一个名为的文件夹 音讯 然后在里面我们将被创造 uploadAudio.js 档案

const 强大 = require('formidable'); // import 强大 package
const form = new 强大.IncomingForm();

const uploadAudio = function() {};

uploadAudio.prototype.byFile = (req, res, callback) => {

    form.parse(req); // parse the request 档案

    /* @fileBegin : Begains to upload 档案 */
    form.on('fileBegin', (name, file) => {
        文件。path = `${__dirname}/../../public/assets/${file.name}`; // upload 档案 to the directory
    });

    /* @error : On error We can send resposnse as failed with err message */
    form.on('error', err => callback(false, { reason: err, statusCode: 302 }));

    /* @end: When all the 档案 are uploaded send response as success with success message */
    form.on('end', () => {
        callback(false, { message: `Audio Uploaded Successfully`, statusCode: 200 });
    });
};
module.exports = new uploadAudio();