首页 > 解决方案 > 从角度上传多个包含图像数据数组的 FormField 对象以表达

问题描述

我正在尝试上传两个 FormField 对象以及要表达的表单数据。

我坚持的部分是使用 express 中的 multer 库从请求中提取此数据。我可以访问表单数据,但不能访问 FormField 对象。

角度:

requestBooking(formFields, aPics:Array<File>,bPics:Array<File>): {
    const aaPics = new FormData();
    const bbPics = new FormData();

    aPics.forEach(image => {
      aaPics.append('aImgs', image);
    });
    referencePics.forEach(image => {
      bbPics.append('bImgs', image);
    })
    
    // aaPics.forEach((value,key) => {
    //   console.log(key + ' ' + value);
    // })

    const payload = {
      form: formFields,
      aImgs: aaPics,
      bImgs: bbPics
    }

    this.rApi.makePostRequest(
      this.serverUrl + this.uris.requestBooking,
      payload
      ).subscribe(
        res => {
          let response: apiResponse = {
            type: 'Post',
            origin: this.apiOrigins.requestBooking,
            isError: false,
            content: res
          } 
          this.bookingUpdateResponse$.next(response);
        }, err =>  {
          
          this.bookingUpdateResponse$.next(err)
        }
      )
  }

我已经确认 FormField 数据正确附加到 FormField 对象,所以我认为它被发送

快递:

路线/booking.js

const aUploads = multer();
const bUploads = multer();

const bookingRouter = express.Router();
bookingRouter.post('/request', aUploads.array('aImgs', 10), bUploads.array('bImgs',10), requestABooking);

控制器/bookings.js

export const requestABooking = async (req, res) => {
 
    const PATH = './uploads';
    const bookId = uuidv4();

    const guestInfo = req.body.form.fmgroup1;
    const tattooInfo = req.body.form.fmgroup2;
    const bodyImgs =  req.body.form.aImgs;
    const tatImgs = req.body.form.bImgs;

    //console.log( req.body);

    // bodyImgs.forEach((value,key) => {
    //    console.log(key + ' ' + value);
    // })
}

此时我无法看到 FormField 信息。

我很确定我在路线中使用 multer 错误,但这不是我尝试的第一件事。理想情况下,id 而不是以这种方式添加到路由中,而是从正文中的对象中提取信息,因为我认为前者需要我为上传的角度编写一个特定的路径。

如果有一种方法可以在快速控制器中执行此操作,那将是我认为的最佳解决方案,但如果没有解决方案,将非常受欢迎!

标签: javascriptnode.jsangularexpressfile-upload

解决方案


您可以在 url https://javascript.plainenglish.io/uploading-files-using-multer-on-server-in-nodejs-and-expressjs-5f4e621ccc67上参考这篇文章

我昨天才跟着它让它工作似乎你的 multer 没有按照它应该的方式配置


推荐阅读