如何使用 fetch 和 multer 上傳帶有 json 數據的文件？

Question

我需要在客戶端使用“獲取”javascript 本機 function 在 json 對象上上傳包含一些元數據的文件，並在服務器端使用 multer 中間件進行表達。

客戶：

const data = new FormData()
data.append('video', video)
data.append('userId', userId)
data.append('property', property)

fetch('/api/video', {
    method: 'POST',
    // headers: {
    //     Accept: 'application/json',
    //     'Content-Type': 'application/json',
    // },
    // body: JSON.stringify({ userId, property })
    body: data
}).then(res => {
    console.log( res )
})

服務器：

const express = require('express')
const multer = require('multer')

const app = express()
app.use(express.urlencoded())
app.use(express.json())

const multerUpload = multer({ dest: './videos' })
const uploadDebugged = multerUpload.single('video')

function debugMulter(req, res) {
    uploadDebugged(req, res, (err) => {
        console.log(req.body)
        console.log('multer error:', err)
    })
    res.send()
}


app.post('/api/video', debugMulter)

服務器日志：

{ video: 'undefined', userId: '5', property: '1' }
multer error: undefined

Multer 說沒有任何錯誤，但在“視頻”文件夾中仍然是空的。

我喜歡在獲取中使用標頭的解決方案，以允許 json 數據和文件發布到服務器。

編輯它終於可以工作了，視頻 object 在服務器端是空的，所以 fetch、FormData 和 multer 工作正常。

Answer 1

您必須通過 FormData object 來獲取文件上傳，不要將其轉換為 URLSearchParams object。

---

嘗試將uploadDebugged傳遞給路由，然后從req.file訪問文件

const express = require('express')
const multer = require('multer')

const app = express()
app.use(express.urlencoded())
app.use(express.json())

const multerUpload = multer({ dest: './videos' })
const uploadDebugged = multerUpload.single('video')

function debugMulter(req, res) {
    console.log(req.body)
    console.log(req.file)
    res.send()
}


app.post('/api/video', uploadDebugged, debugMulter)