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

Question

我正在尝试使用 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 从服务器发送到前端）？

Answer 1

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

前端

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

// Do not customise the content-type header.
// See https://stackoverflow.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() 能够处理缓冲区。