我正在嘗試允許用戶將圖片上傳到我的應用程式（React 前端、Node 后端）。我想將上傳的檔案從客戶端發送到服務器，然后從我的服務器向將處理存盤影像的 Firebase 云函式發出請求。
我的表單 HTML 如下：
<div className='LoafGalleryWrap'>
<h1 className='banner'>Illustrious Loafs</h1>
<form>
<label>Add a loaf to the exhibit:
<input type='file' onChange={props.fileSelectedHandler} />
<button onClick={props.fileUploadHandler}>Upload</button>
</label>
</form>
<button onClick={props.toggleDisplayLandingPage}>Back</button>
</div>
我使用以下方法在我的應用程式中獲取檔案資料。在 console.log 中，我可以看到要發送到服務器的檔案資料。
fileUploadHandler(e) {
e.preventDefault();
e.stopPropagation();
let file = this.state.selectedFile;
let formData = new FormData();
formData.append('image', file);
formData.append('name', file.name);
const pic = formData.getAll('image');
console.log(formData)
axios({
url: 'http://localhost:3001/uploadLoaf',
method: 'POST',
data: formData,
headers: { "Content-Type": "multipart/form-data" }
})
.then(respo => console.log(respo))
}
在我的服務器中，當我檢查請求正文時，那里什么也沒有。我把它注銷，然后簡單地得到一個空物件。我試過使用 multer 和 connect-multipart 中間件，但沒有一個成功地顯示表單資料。我正在做的類似于本文建議的內容（https://www.geeksforgeeks.org/file-uploading-in-react-js/），但我不知道如何在我的表單中發送資料. 非常感謝任何指導。
我的服務器路由如下：
app.post('/uploadLoaf', (req, res) => {
console.log('uploadLoaf endpoint reached');
console.log(req.body);
res.status(201).json('complete')
// axios.post('https://us-central1-sour-loafs.cloudfunctions.net/uploadFile/', 'upload_file', formData, {
// headers: {
// 'Content-Type': 'multipart/form-data'
// }
// })
// .then(result => {
// console.log(result);
// res.send(result);
// })
// .catch(err => {
// console.log(err);
// res.send(err)
// })
});
uj5u.com熱心網友回復：
嘗試用這個替換你擁有的 axios 函式
axios.post("http://localhost:3001/uploadLoaf", formData, { })
.then(res => { // then print response status
console.log(res.statusText)
})
讓我知道你在后端使用了什么以及 res 函式的結果是什么
uj5u.com熱心網友回復：
我設法通過使用 Multer 的上傳功能訪問 FormData 檔案資料。我配置的匯入和服務器路由以便我可以訪問檔案資料如下：
const multer = require("multer");
const upload = multer({
limits:{fileSize: 1000000},
}).single("image");
app.post('/uploadLoaf', (req, res) => {
upload(req, res, (err) => {
if (err) {
res.sendStatus(500);
}
console.log(req.file);
res.send(req.file);
});
});
我現在不確定如何以 API 期望的方式將此檔案資料發送到 API，收到一條錯誤訊息：“錯誤：無法處理請求\n”。但至少我現在可以看到表單中的資料。
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/318236.html
標籤：javascript 节点.js 反应 公理 表单数据