如何将对象数组中的文件发送到快递服务器？

Question

我有一个对象数组，每个对象都包含一些字符串类型的属性和一个文件。

这是我的数组的样子：

const args = [
    {
        name: 'presentation',
        price: 9.99,
        tags: 'invest, finance, business',
        file: File,
        thumbnail: File
    },
    {
        name: 'presentation2',
        price: 20.99,
        tags: 'invest, finance, business',
        file: File,
        thumbnail: File
    }
]

const headers = {
 headers: {
   Authorization: `Bearer ${token}`
 }
};

我的目标是将整个对象数组发送到 Express Server。 在那里我会将信息保存到 Mongo 并将文件上传到 S3。 但是目前，当我在 POST 请求中发送此文件时，我无法在服务器上获取文件流，甚至当我 console.log 时，整个req.body都是空对象

axios.post(`${slidesRoute}/createSlides`, args, headers);

---

或者，我尝试将所有内容都放入 FormData 中。 例如：

let formData = new FormData();
    selectedFiles.forEach((selectedFile, i) => {
        formData.append(`name_${i}`, selectedFile.name);
        formData.append(`price_${i}`, selectedFile.price);
        formData.append(`tags_${i}`, selectedFile.tags);
        formData.append(`file_${i}`, selectedFile.file);
        formData.append(`thumbnail_${i}`, selectedFile.thumbnail);
    });
axios.post(`${slidesRoute}/createSlides`, formData, headers);

然后在后台。 我无法使用 multer 捕获这些文件。 因为表单数据中的文件名是动态生成的

file_1, file_2 file_3,...

但是 multer 期望传递确切的文件名，例如multer().array('file')

所以在我的第二种方法中，我无法使用 Multer 捕获文件

Answer 1

您不能在 JSON 中包含文件。 文件不可 JSON 序列化。 理想情况下，您应该有一个单独的端点来接受您的文件，使用content-type: multipart/form-data发送它们，接收存储在服务器上的该文件的唯一 ID，然后使用 ID 而不是文件发送您的 JSON。

作为替代方案，您可以将您的文件 Base64 编码为一个字符串，在您的请求中插入这个字符串，然后在接收端将其解码

Answer 2

FormData 键值在您的代码中默认为数组 只需更改

formData.append(`file_${i}`, selectedFile.file);

到

formData.append(`file`, selectedFile.file);

您应该能够使用multer().array('file')在服务器端接收文件数组

下面的示例演示了 FormData 键值数组行为

 const formData = new FormData(); formData.append('key1', 'value1'); formData.append('key1', 'value2'); formData.append('key2', 'value1'); formData.forEach(function(value, key){ console.log(key, value); });

Answer 3

我使用 FormData 发送许多文件 - 然后在 node.js 服务器上我使用 Formidable。

我在下面粘贴了一些可能有帮助的部分代码 - 抱歉，这不是一个较小的样本。

希望能帮助到你

在浏览器方面，我有：

let form_data = new FormData()
form_data.append('upload_data', file)
$.ajax({
  url: '/file/upload' + remote_path + '/' + filename,
  type: 'POST',
  data: form_data,
  processData: false,
  contentType: false,
  success: (res) => {
...

在 node.js 方面（为长度道歉..）我有：

const fs = require('fs')
const formidable = require('formidable')
const path = require('path')
...
app.post('/file/upload/*', (req, res) => {
let filename = req.params[0]
let media = path.basename(filename)
let folder = filename.substring(0, filename.length - media.length)
let form = new formidable.IncomingForm()
// form.encoding = 'utf-8'
form.multiples = true
form.uploadDir = path.join(media_folder, folder)
form.keepExtensions = true
form.parse(req, (err, fields, files) => {
  if (err) {
    fail(res, 'failed to upload')
  } else {
    success(res)
  }
})
form.on('fileBegin', (name, file) => {
  const [fileName, fileExt] = file.name.split('.')
  file.path = path.join(form.uploadDir, `${fileName}_${new Date().getTime()}.${fileExt}`)
})
form.on('file', (field, file) => {
  fs.rename(file.path, path.join(form.uploadDir, file.name), (err) => {
    if (!res.headersSent) { // Fix since first response is received
      fail(res, 'an error has occured with form upload' + err)
    }
  })
})
form.on('error', (err) => {
  fail(res, 'an error has occured with form upload' + err)
})
form.on('aborted', (err) => {
  fail(res, 'Upload cancelled by browser')
})

})