从动态创建的表单输入上传多个文件答案

【问题标题】：Upload multiple files from dynamically created form inputs从动态创建的表单输入上传多个文件
【发布时间】：2021-05-14 23:47:51
【问题描述】：

我正在学习 MEAN 堆栈，但在上传文件时遇到了问题。我有一个公司表格：

this.companyForm = this.fb.group({
      trucks: this.fb.array([]),
      ...
    });

卡车字段是动态创建的：

newTruck(): FormGroup {
    this.added = false;
    return this.fb.group({
      ...
      TLic: new FormControl(null, {
        validators: [Validators.required]
      }),
      Lic: new FormControl(null, {
        validators: [Validators.required]
      }),
      CMRLic: new FormControl(null, {
        validators: [Validators.required]
      })
    })
  }

  addTruck() {
    this.trucks().push(this.newTruck());
  }

在保存表单上：

this.authService.createUserStep1(
     ...
      this.companyForm.value.trucks
    );

授权服务：

createUserStep1(... trucks: Array<any>) {
    const AuthDataStep1: AuthDataStep1 = {
      ...
      trucks: trucks
    };
    this.http.put(BACKEND_URL + "signupStep1/", AuthDataStep1).subscribe(
      () => {
        this.authStatusListener.next(true);
        this.router.navigate(["auth/signupStep2"]);
      },
      error => {
        this.authStatusListener.next(false);
      }
    );
  }

我写入 DB 的 Nodejs 控制器：

exports.createUserStep1 = (req, res, next) => {
    ...
        for (i = 0; i < req.body.trucks.length; i++) {
          
          const truck = new Truck({
            ...
            TLic: req.body.trucks[i].file.TLic[0].filename,
            Lic: req.body.trucks[i].file.Lic[0].filename,
            CMRLic: req.body.trucks[i].file.CMRLic[0].filename,
          });
          Truck.create(truck);
        }
      })
}

文件上传中间件：

const multer = require("multer");
var path = require('path');

const storage = multer.diskStorage({
  destination: (req, file, cb) => {
    cb(null, "backend/truckdocs");
  },
  filename: (req, file, cb) => {
    const name = file.originalname
      .toLowerCase()
      .split(" ")
      .join("-");
    cb(null, name + "-" + Date.now() + "." + path.extname(file.originalname));
  }
});

module.exports = multer({ storage: storage }).fields([
  {
    name: "TLic", maxCount: 1
  }, {
    name: "Lic", maxCount: 1,
  }, {
    name: "CMRLic", maxCount: 1
  }
]);

和路线

const express = require("express");

const UserController = require("../controllers/user");
const extractTruckFiles = require("../middleware/truckfiles");
const checkAuth = require("../middleware/check-auth");

const router = express.Router();

/*App*/
...
router.put("/signupStep1", checkAuth, extractTruckFiles, UserController.createUserStep1);

我想在表单中创建 x 辆卡车，并为每辆卡车上传 3 个文件（TLic、Lic、CMRLic）。实现此目的的最佳方法是什么？我知道您需要时间来了解我的代码，在此先感谢您。

【问题讨论】：

请提供minimal reproducible example，重点关注“最小”。我确信验证和卡车注册号码对于提出您的问题不是必需的。您可以发布指向 stackblitz 项目的链接。
有什么问题？我想做 X 不是 SO 的问题。
第一步，在file上添加multiple，并根据您收到的文件数量迭代所有细节。
更新了！ @AndrewAllen，x 辆卡车

标签： javascript node.js angular mean-stack

【解决方案1】：

这就是我在上传 3 张照片的电子商务中所做的。我已经用 MVC 模式完成了，我在路由文件中调用了 multer。

const express = require("express")
const multer = require("multer");

const router = express.Router()

const productController = require("../../controller/vendor/product")


const app = express();

const fileStorage = multer.diskStorage({
  destination: (req, file, cb) => {
    cb(null, "images");
  },
  filename: (req, file, cb) => {
    cb(null, new Date().toISOString().replace(/:/g, '-') + '-' +file.originalname)
  }
});

const fileFilter = (req, file, cb) => {
  if(file.mimetype === 'image/png' || file.mimetype === 'image/jpg' || file.mimetype === 'image/jpeg') {
    cb(null, true)
  } else {
    cb(null, false)
  }
}

let filehandler = app.use(multer({storage : fileStorage, fileFilter: fileFilter }).array('image',3))

/* @GET product Page request */
router.get('/products', productController.getProduct)


/* @GET add product  page Request */
router.get('/add-product', productController.getAddProduct)

/* @POST Request */
router.post('/add-product', filehandler, productController.postAddProduct)




/* @GET AJAX Request findind subcategory */
router.get("/getSubCategory/:id", productController.getSubCategory);

module.exports = router

【讨论】：