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

问题描述 投票:0回答:1

我设法使用HTML表单操作属性将文件存储在计算机上,然后在Express Web服务器上处理此请求。现在,当我尝试用表单的“提交”按钮上的eventlistener替换此事件,而不是使用action属性发送发帖请求时,我无法使其正常工作。

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

获取

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!')
    })
})
javascript express xmlhttprequest fetch
1个回答
0
投票

根据您的html和fetch代码,您的快速代码应如下所示:

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中。

© www.soinside.com 2019 - 2024. All rights reserved.