如何正确地将 blob 从前端传递到后端？

Posted 2023-03-22

【中文标题】如何正确地将 blob 从前端传递到后端？

【英文标题】：How to properly pass a blob from the frontend to the backend?

【发布时间】：2021-12-23 14:55:15

【问题描述】：

我正在尝试使用 formData 将我的 react 应用程序中的音频文件块传递到 Express 后端，但是当我尝试在后端检索数据时，我一直处于未定义状态。

前端代码：

var fd = new FormData();
fd.append('fname', 'test.webm');
fd.append('data', blob);

payload = audioFile: fd;

axios.post('/translate-audio', payload, headers: 'content-type': 'multipart/form-data')

后端代码：

app.use(cors());
app.use(express.json());

app.post('/translate-audio', async (req, res) => 
    console.log(req.body.audioFile);
);

旁注：

当我在前端运行console.log(payload.audioFile.get('data')); 时，我能够看到该文件：

File name: 'blob', lastModified: 1636600689885, lastModifiedDate: Wed Nov 10 2021 19:18:09 GMT-0800 (Pacific Standard Time), webkitRelativePath: '', size: 10828, …
    lastModified: 1636600689885
    lastModifiedDate: Wed Nov 10 2021 19:18:09 GMT-0800 (Pacific Standard Time) 
    name: "blob"
    size: 10828
    type: "audio/webm;codecs=opus"
    webkitRelativePath: ""

非常感谢任何帮助。我只需要将 blob 正确传递到后端，因此不使用 formData 的其他替代方法也会有所帮助。另外，有什么好的方法可以反过来（将音频 blob 从服务器发送到前端）？

【问题讨论】：

你可能还想看看使用缓冲区：blob.arrayBuffer/.stream, express.raw

【参考方案1】：

您不能将FormData 序列化为 JSON。直接发送 FormData 作为您的请求数据，并使用像 Multer 这样的中间件在服务器端处理它

前端

const fd = new FormData()
fd.append("audioFile", blob, "test.webm")

// Do not customise the content-type header.
// See https://***.com/a/68643919/283366
axios.post("/translate-audio", fd)

快递

const multer  = require("multer")
const storage = multer.memoryStorage() // or use disk storage
const upload = multer( storage )

app.post('/translate-audio', upload.single("audioFile"), async (req, res) => 
  console.log(req.file);
  // see https://github.com/expressjs/multer#file-information
);

---

另外，有什么好的方法可以反过来（将音频 blob 从服务器发送到前端）？

如果您正在处理磁盘上的文件，请使用res.sendFile()，否则res.send() 能够处理缓冲区。

【讨论】：

谢谢！后续问题：有没有办法只将文件提取到内存中的缓冲区而不是将其保存在本地磁盘中？我正在处理最多几百 KB 的小文件。

这正是我使用 Multer 的 memoryStorage() 的答案所做的。文件缓冲区将位于req.file.buffer。根据我的回答，请参阅github.com/expressjs/multer#file-information