时间戳

首页 > 解决方案 > 使用 Angular 9 将文件上传到资产文件夹

node.js - 使用 Angular 9 将文件上传到资产文件夹

问题描述

我正在开发一个 Angular 9 应用程序，我想构建一个文件上传系统，该系统能够将文件从客户端发送到我们的服务器并将它们存储在 assets 文件夹中。

问题是我不知道如何将文件发送到服务器并将其存储在资产文件夹中。

在后端，我正在使用 nodejs。

您在这里的帮助将不胜感激。

标签： node.jsangular9

解决方案

有两种方法；- 将您的图像存储在数据库中的 base64 中（查看这篇文章：BASE64 to image angular 2）

  • 前端，通过文件上传获取文件，将其附加到 FormData 对象。如果是简单的上传，您可以这样追加：
FormData.append('upload', upload, extraParam to define the file name);

如果是多次上传，这样：

for (let i = 0; i < files.length; i++) {
      FormData.append('uploads[]', files[i], extraParam to define the file name);
    }

然后，在背面，最好使用 multer ( https://github.com/expressjs/multer )

有一个用于多次上传的示例：

const multer = require('multer');

const MIME_TYPE_MAP = {
  'image/png': 'png',
  'image/jpeg': 'jpeg',
  'image/jpg': 'jpg'
};

const storage = multer.diskStorage({
  destination: (req, file, cb) => {
    const isValid = MIME_TYPE_MAP[file.mimetype];
    let error = new Error('Invalid mime type');
    if(isValid) {
      error = null;
    }
    cb(error, "backend/images/photos");
  },
  filename: (req, file, cb) => {
    const name = file.originalname.toLowerCase().split(' ').join('-');
    const ext = MIME_TYPE_MAP[file.mimetype];
    cb(null, name + '-' + Date.now() + '.' + ext);
  }
});

module.exports = multer({storage: storage}).array("uploads[]", numberOfMaxUploads);

还有一个简单的上传：

const multer = require('multer');

const MIME_TYPE_MAP = {
  'image/png': 'png',
  'image/jpeg': 'jpeg',
  'image/jpg': 'jpg'
};

const storage = multer.diskStorage({
  destination: (req, file, cb) => {
    const isValid = MIME_TYPE_MAP[file.mimetype];
    let error = new Error('Invalid mime type');
    if(isValid) {
      error = null;
    }
    cb(error, "backend/images/photos");
  },
  filename: (req, file, cb) => {
    const name = file.originalname.toLowerCase().split(' ').join('-');
    const ext = MIME_TYPE_MAP[file.mimetype];
    cb(null, name + '-' + Date.now() + '.' + ext);
  }
});

module.exports = multer({storage: storage}).single("image");

在那里，我的 multer 包被称为后端路由上的中间件。你可以这样做：

const extractFile(s) = require('../middlewares/files/extractFile');
router.post("", extractFile(s), nextCall(Middleware or controller.method);

推荐阅读