将HTML表单操作替换为获取Web服务器的api

Question

我设法使用HTML表单操作属性将文件存储在电脑上，然后在Express Web服务器上处理此请求
当我现在尝试用表单提交按钮上的事件侦听器来代替它，而不是使用action属性来发送post请求时，我无法使其工作。

我收到一条错误消息400错误请求。

Fetch

let form = document.querySelector('#uploadForm')
let inpFile = document.querySelector('#inpFile')
form.addEventListener('submit', async event => {
event.preventDefault()
const formData = new FormData()
formData.append('inpFile', inpFile.files[0])
fetch('http://myip/upload', {
method: 'POST',
headers: {
'Content-Type' : 'multipart/form-data'
},
body: formData
}).catch(console.error)
})

HTML

<form ref='uploadForm' 
id='uploadForm' 
method='post' 
encType="multipart/form-data">
<input type="file" name="sampleFile" id="inpFile" />
<input type='submit' value='Submit' />
</form>     

Express服务器

const express = require('express')
const app = express();
const path = require('path')
const things = require('./routes/things')
const fileUpload = require('express-fileupload')
app.post('/upload', (req, res) => {
let sampleFile = req.files.sampleFile
sampleFile.mv(__dirname + '\files\' + sampleFile.name, (err) => {
if (err)
return res.status(500).send(err)
res.send('File uploaded!')
})
})

Answer 1

根据你的html和fetch代码，你的express代码应该是这样的：

const express = require('express')
const app = express();
const path = require('path')
const things = require('./routes/things')
const fileUpload = require('express-fileupload')
app.use('/upload', fileUpload({
createParentPath: true
}));
app.post('/upload', (req, res) => {
const { inpFile } = req.files;
inpFile.mv(path.join(__dirname, 'files', inpFile.name))
.then(() => res.send('File uploaded!'))
.catch(err => res.status(500).send(err));
})

您需要将中间件绑定到应用程序：

app.use('/upload', fileUpload({
createParentPath: true
}));

您的文件对象应该在req.files.inpFile.中

此外，您还需要从提取请求中删除标头。