我正在尝试从桌面上传图像,但未找到多部分边界的错误。如何设置图片上传的边界?这是我第一次上传图片,请大家多多指教。
用户上传图片时的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