multipart/form-data

我有一個表單，該表單接受一個文件和一些字段，我希望通過 Fetch API 將這些數據發送到服務器，就像這樣（React 代碼）： <form encType='multipart/form-data' action='/api/post' method='POST' onSubmit={async (e) => { e.preventDefault() if (!title) { alert('請輸入標題') return } if (!content && !image) { alert('請在帖子中輸入一些文本') return } const body = new FormData() body.append('image', image) body.append('title', title) body.append('content', content) const res = await fetch('/api/post', { body, method: 'POST', headers: { 'Content-Type': 'multipart/form-data', }, }) }} > ... </form> 我遇到了一個問題，文件數據實際上沒有被發送到服務器。 解決方案是這樣的：不能設置標頭。 我確實設置了 multipart/form-data 標頭，因為這是用於文件上傳的，但顯然這正是破壞了通過 fetch 上傳文件的原因。 從 fetch 請求中刪除標頭，然後事情應該能正常運作。

如何在Express中管理存儲和處理通過表單上傳的文件 這是一個允許用戶上傳文件的HTML表單的示例： <form method="POST" action="/submit-form" enctype="multipart/form-data"> <input type="file" name="document" /> <input type="submit" /> </form> 不要忘記在表單中添加enctype="multipart/form-data"，否則文件將無法被上傳 當用戶點擊提交按鈕時，瀏覽器會自動向與該頁面相同源頭的/submit-form URL 發送一個POST請求。瀏覽器將數據以multipart/form-data的形式而不是編碼的形式（即普通表單的application/x-www-form-urlencoded）發送出去。 在服務器端，處理multipart數據可能會很棘手且容易出錯，因此我們將使用一個名為formidable的實用庫。這是GitHub倉庫，它擁有超過4000顆星且得到良好的維護。 您可以使用以下命令來安裝它： npm install formidable 然後在您的Node.js文件中引入它： const express = require('express') const app = express() const formidable = require('formidable') 現在，在/submit-form路由的POST端點中，我們使用formidable.IncomingForm()實例化一個新的Formidable表單： app.post('/submit-form', (req, res) => { new formidable.IncomingForm() }) 在這樣做之後，我們需要能夠解析表單。我們可以通過提供一個回調函數來同步進行解析，這意味著所有文件都被處理，一旦formidable完成它們的處理，它就會使它們可用： app.post('/submit-form', (req, res) => { new formidable.IncomingForm().parse(req, (err, fields, files) => { if (err) { console.error('Error', err) throw err } console.log('Fields', fields) console.log('Files', files) for (const file of Object....

我在 Next.js 頁面中有一個表單： <form method="post" action="/api/new" enctype="multipart/form-data">...</form> 該表單呼叫一個 API 端點。 在這個表單中，我有一個 file 輸入控制元件： <input name="logo" type="file" /> 然而在 API 路由中，我無法得到這個檔案。 我進行了一些搜索，結果發現 Next.js 預設並不允許這樣做。我嘗試了幾種解決方案，因為有些解決方案不能很好地上傳文件並同時傳送多個相同屬性的複選框。有些解決方案中，我能得到該檔案，但其餘部分的表單功能則無法正常工作。 我必須安裝兩個套件： npm install next-connect multiparty 我在 Next.js 專案的根目錄中創建了一個 middleware 資料夾，在其中創建了這個檔案： middleware/middleware.js import nextConnect from 'next-connect' import multiparty from 'multiparty' const middleware = nextConnect() middleware.use(async (req, res, next) => { const form = new multiparty.Form() await form.parse(req, function (err, fields, files) { req.body = fields req.files = files next() }) }) export default middleware 然後我將 API 路由從通常的結構改為：...