javascript - 由于多部分无法加载文件:未找到边界
问题描述
我正在尝试从桌面上传图像,但未找到多部分边界的错误。如何设置图片上传的边界?这是我第一次上传图片,请多多指教。
用户上传图片时的html事件监听器
document.getElementById('image-file').addEventListener('change',
async (e) => {
const file = e.target.files[0]
const bodyFormData = new FormData()
bodyFormData.append('image', file)
showLoading()
const data = await uploadProductImage(bodyFormData)
hideLoading()
if (data.error) {
showMessage(data.error)
} else {
showMessage('Image Uploaded Successfully.')
console.log(data)
document.getElementById('image').value = data.image
}
})
},
api.js - 发布动作
export const uploadProductImage = async (bodyFormData) => {
const options = {
method: 'POST',
body: bodyFormData,
headers: {
'Content-Type': 'multipart/form-data',
},
}
try {
const response = await fetch(`${apiUrl}/api/uploads`, options)
const json = await response.json()
if (response.status !== 201) {
throw new Error(json.message)
}
return json
} catch (err) {
console.log('Error in upload image', err.message)
return { error: err.message }
}
}
uploadroute.js - 用于上传图片
import express from 'express'
import multer from 'multer'
const storage = multer.diskStorage({
destination(req, file, cb) {
cb(null, 'uploads/')
},
filename(req, file, cb) {
cb(null, `${Date.now()}.png`)
},
})
const upload = multer({ storage })
const router = express.Router()
router.post('/', upload.single('image'), (req, res) => {
res.status(201).send({ image: `/${req.file.path}` })
})
export default router
解决方案
当您fetch
在前端发送表单时,不要自己设置 Content-Type 标头。如果这样做,它将没有表单边界,并且 multipart/form-data 请求将在后端被错误地解析。
您可以省略标题,因为浏览器会为您设置它,其中包括一个唯一的边界。例如:
- 你的标题:
Content-Type=multipart/form-data;
- 浏览器的标题:
Content-Type=multipart/form-data; boundary=------WebKitFormBoundaryg7okV37G7Gfll2hf--
在你的情况下:
const options = {
method: 'POST',
body: bodyFormData,
}
const response = await fetch(`${apiUrl}/api/uploads`, options)