如何用JavaScript向服务器上传文件？我的代码上传异常求助

核心问题出在你传递给FormData的是整个FileList对象，而非单个File实例，同时服务器端的文件读取方式也存在错误。

前端代码修正 #

1. 状态存储单个File对象 #

FileList是只读类数组对象，直接存入状态并传递给FormData会被序列化为字符串"[object FileList]"，单文件上传场景下应提取其中的单个文件：

const [formValues, setFormValues] = useState({
    image: null
})

<input type="file" name="image" onChange={e => setFormValues({...formValues, image: e.target.files[0]})}/>

2. 正确向FormData添加文件 #

确保append的是File实例而非FileList：

const formData = new FormData()
// 传入单个File对象
formData.append('image', formValues.image)

3. 修正Axios异步请求 #

Axios请求是异步操作，需添加await才能获取实际响应结果：

try {
    const response = await axios.post('http://localhost:4000/uploadShow', formData)
    console.log(response)
} catch (e) {
    console.log(e)
}

服务器端修正 #

如果使用Express框架，不能通过req.body获取上传的文件，需借助multer中间件解析multipart/form-data类型请求：

1. 安装multer：

npm install multer

2. 配置并使用中间件：

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

// 配置内存存储（也可改为磁盘存储）
const storage = multer.memoryStorage()
const upload = multer({ storage: storage })

// 用upload.single('image')处理单文件上传，对应前端formData的key
app.post('/uploadShow', upload.single('image'), (req, res) => {
    // 上传的文件信息在req.file中
    console.log('上传文件信息:', req.file)
    // 普通表单字段在req.body中（若有）
    console.log('表单其他数据:', req.body)
    res.status(200).json({ message: '文件上传成功' })
})

关键说明 #

• FileList无法被FormData正确序列化，必须提取其中的单个File实例
• 上传文件的请求类型为multipart/form-data，后端必须用对应中间件解析，否则无法获取文件内容
• Axios传递FormData时会自动设置正确的Content-Type，无需手动指定（手动指定可能丢失边界符）

内容的提问来源于stack exchange，提问作者Pleasant Nightmares