从 angular 上传多个包含图像数据数组的 FormField 对象来表达

Question

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

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

在angular中：

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 对象，所以我认为它已发送

快递：

routes/booking.js

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

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

controllers/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 而不是以这种方式添加到路由中，而是从主体中的对象中提取信息，因为我认为前者会要求我在 angular.

中编写特定的上传路径

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

Answer 1

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

我昨天刚关注它以使其起作用似乎您的 multer 没有按照应有的方式配置

Answer 2

BLUF：将您的所有信息添加到单个 formData 对象中。

折腾了好几天终于找到了满意的答案！

问题：我想像这样传递信息：

parentObject:{
  formInfo:{json},
  imageArr1:{Array<File>},
  imageArr2:{Array<File>}
}

但是为了处理多部分表单信息，我需要使用“multer”之类的东西来处理与数据缓冲区和其他大文件流内容相关的特殊数据。

要使用它，您需要在后端的路由器级别对其进行格式化，最初我不想这样做，因为这会使我的过程看起来像这样：

客户端上传表单数据 -> 服务器发布数据 returns 创建对象的密钥 -> 客户端上传带有管理密钥的图像数据 -> 服务器 returns 响应良好，一切都很好。但是，如果失败了，则需要实施太多的错误处理流程，所以我真的不想将其分解为多个服务调用场景。

但简单的解决方案如下所示：

客户

Object.keys(formFields).forEach(field => { formData.append(field, formFields[field])}. 
fileArrAA.forEach(image => { formData.append('aaImages', image)}
fileArrBB.forEach(image => { formData.append('aaImages', image)}

this.apiSvc.post(url, formData).subscribe....

服务器

const multer = require('multer');
const upload = multer();

router.post('/postThing', upload.any(), endpoint);


const endpoint = async (req, res) => {

  req.files; // has all the File data types in it as an array
  req.body; // has all the form fields or any key/value pairs in it
}

观察：我尝试将嵌套对象传递到 formData 对象中，但我无法在后端提取它，所以我最终传递了 formData 对象顶层中的所有字段。可能缺少用于解析 api 数据或其他内容的包。

希望没有其他人需要经历这一学习曲线！

从 angular 上传多个包含图像数据数组的 FormField 对象来表达

uploading multiple FormField objects containing image data arrays from angular to express

javascript

file-upload

node.js

express

angular