时间戳

首页 > 解决方案 > 从动态创建的表单输入上传多个文件

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

问题描述

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

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

Trucks 字段是动态创建的：

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);
      }
    );
  }

我写入数据库的 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）。实现这一目标的最佳方法是什么？我知道您需要时间来了解我的代码，我非常感谢您。

标签： javascriptnode.jsangularmean-stack

解决方案

这就是我在上传 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

推荐阅读