javascript - 由于多部分 : Boundary not found 无法加载文件

Question

我正在尝试从桌面上传图像，但找不到多部分边界的错误。如何设置上传图片的边界？第一次上传图片，请指教。

用户上传图片时的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

Answer 1

当您在前端使用 fetch 发送表单时，不要自己设置 Content-Type header 。如果这样做，它将没有表单边界，并且 multipart/form-data 请求将在后端被错误地解析。

您可以省略标题，因为浏览器会为您设置它，其中包括一个唯一的边界。例如:

• 您的 header :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)