如何在客户端请求附加文件信息？答案

【问题标题】：how to reqeust additional file info in client side?如何在客户端请求附加文件信息？
【发布时间】：2020-11-05 06:29:07
【问题描述】：

我可以在客户端添加一些文件信息，并在一个请求中在服务器端接收这些信息和文件吗？

下面的代码是我试过的。

我希望将来自客户端请求的文件名（字符串）和文件大小（字符串）信息发送到服务器

This is client side UI

客户端请求

// console.log(files)

(2) [File, File]
0: File
fileName: "home banner"
fileSize: "md"
lastModified: 1578046598141
lastModifiedDate: Fri Jan 03 2020 19:16:38 GMT+0900 (Korean Standard Time) {}
name: "주석 2020-01-03 191634.png"
size: 80587
type: "image/png"
webkitRelativePath: ""
__proto__: File
1: File
fileName: "home carousel"
fileSize: "sm"
lastModified: 1585672500304
lastModifiedDate: Wed Apr 01 2020 01:35:00 GMT+0900 (Korean Standard Time) {}
name: "Capture001.png"
size: 756604
type: "image/png"
webkitRelativePath: ""
__proto__: File
length: 2

// on submit

const handleSubmit = (e) => {
  e.preventDefault();
  console.log(files);
  const formData = new FormData();
  files.forEach((file, i) => formData.append('file' + i, file));

  fetch('/image/upload', {
    method: 'POST',
    body: formData,
  });
};

服务器端

app.post('/image/upload', (req, res) => {
  console.log(req.files);
});

// log
{
  file0: {
    name: '주석 2020-01-03 191634.png',
    data: <Buffer 89 50 4e 47 0d 0a 1a 0a 00 00 00 0d 49 48 44 52 00 00 06 45 00 00 03 0f 08 06 00 00 00 6b 13 d2 fd 00 00 00 01 73 52 47 42 00 ae ce 1c e9 00 00 00 04 ... 80537 more bytes>,
    size: 80587,
    encoding: '7bit',
    tempFilePath: '',
    truncated: false,
    mimetype: 'image/png',
    md5: '5dc5122f8334ba14b362f4dcf96cd729',
    mv: [Function: mv]
  },
  file1: {
    name: 'Capture001.png',
    data: <Buffer 89 50 4e 47 0d 0a 1a 0a 00 00 00 0d 49 48 44 52 00 00 0a 00 00 00 08 70 08 06 00 00 00 e1 e9 67 30 00 00 00 01 73 52 47 42 00 ae ce 1c e9 00 00 00 04 ... 756554 more bytes>,
    size: 756604,
    encoding: '7bit',
    tempFilePath: '',
    truncated: false,
    mimetype: 'image/png',
    md5: '3858e650b34e3210d41e923f249e9018',
    mv: [Function: mv]
  }
}

【问题讨论】：

标签： httprequest filereader

【解决方案1】：

向 File 对象添加字段不会将其添加到上传中，您将不得不单独上传该数据。

const handleSubmit = (e) => {
  e.preventDefault();
  console.log(files);
  const formData = new FormData();
  files.forEach((file, i) => {
    formData.append('file' + i, file);
    formData.append('file' + i + 'fileName', file.fileName);
    formData.append('file' + i + 'fileSize', file.fileSize);
  });

  fetch('/image/upload', {
    method: 'POST',
    body: formData,
  });
};

在服务器上

app.post('/image/upload', (req, res) => {
  console.log(req.files);
  console.log(req.body);
});

日志

{
  file0fileName: "home banner",
  file0fileSize: "md",
  file1fileName: "home carousel",
  file1fileSize: "sm",
}

【讨论】：