如何使用VueJS将完整Excel文件上传至服务器？

你的代码存在几个关键问题，导致无法正确上传文件，以下是修正方案：

问题分析 #

• 直接传递单个文件对象，没有用FormData包装，而multipart/form-data类型的请求要求用FormData来承载文件数据
• 手动设置Content-type: multipart/form-data会丢失浏览器自动生成的边界标识（boundary），导致后端无法解析请求
• axios调用语法错误，正确的写法应该是await axios.post（前提是你已经安装并导入了axios）

修正后的代码 #

<template>
  <div id="app">
    <input type="file" @change="onChange" />
  </div>
</template>

<script>
// 确保先安装axios：npm install axios
import axios from 'axios'

export default {
  name: "App",
  methods: {
    async onChange(event) {
      const file = event.target.files[0]
      if (!file) return

      const formData = new FormData()
      // 这里的'file'要和后端API期望的字段名一致
      formData.append('file', file)

      try {
        const response = await axios.post('http://localhost:3030/api/new/post', formData)
        console.log('上传成功:', response)
      } catch (error) {
        console.error('上传失败:', error)
      }
    },
  }
};
</script>

关键说明 #

1. FormData的使用：通过FormData.append()方法将文件添加到表单数据中，字段名要和后端接收的参数名匹配
2. 头部设置：无需手动设置Content-type，axios会自动根据FormData生成包含正确边界标识的multipart/form-data头部
3. 错误处理：添加try/catch捕获上传过程中的异常，方便排查问题

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