Node.js端发送图片请求正常，Vue前端请求后端报http: no such file错误

你的代码存在两处核心错误：

• 错误转换文件格式：onImage回调中使用FileReader将用户选中的原始File二进制对象转换为了DataURL格式的base64字符串，后端期望接收的是二进制文件流，无法将base64字符串识别为合法的文件字段。
• 手动设置错误的请求头：使用axios提交FormData格式数据时，浏览器会自动生成带合法boundary分隔符的multipart/form-data请求头，你手动写死该Header会丢失必须的boundary参数，导致后端无法正确拆分解析表单字段，最终找不到file字段。

按照以下步骤修改代码即可：

1. 修改文件选择回调逻辑，直接存储原始File对象用于上传，如果需要前端预览可以单独生成DataURL，不要将base64用于上传：

let imageFile // 存储原始File对象用于上传
let previewImageUrl // 存储base64仅用于前端预览
// 图片选择回调
function onImage(e) {
  const selectedFile = e.target.files[0]
  // 保存原始文件用于上传
  imageFile = selectedFile
  // 如果需要前端预览，单独生成DataURL
  const reader = new FileReader()
  reader.onload = (e) => {
    previewImageUrl = e.target.result
  }
  reader.readAsDataURL(selectedFile)
}

2. 修改上传逻辑，移除手动设置的Content-Type头：

// 上传请求逻辑
function funtest() {
  if (!imageFile) return // 非空校验避免空提交
  const formData = new FormData()
  const url = 'http://localhost:5013/v1/business/honda/widget/test/'
  formData.append('file', imageFile)
  const config = {
    method: 'post',
    url: url,
    data: formData,
    // 不要手动设置Content-Type，axios会自动处理带boundary的请求头
  }
  axios(config)
    .then((response) => {
      console.log('RESPONSE', response)
    })
    .catch((error) => {
      console.log('ERROR', error)
    })
}

内容的提问来源于stack exchange，提问作者Pablo Garcia Vivo