vue上传文件到后端

// Vue 组件中实现文件上传到后端的示例代码

<template>
  <div>
    <!-- 文件选择输入框 -->
    <input type="file" @change="handleFileChange" />
    <button @click="uploadFile">上传文件</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedFile: null, // 存储选中的文件
    };
  },
  methods: {
    handleFileChange(event) {
      // 当用户选择文件时，将文件存储在组件的 data 中
      this.selectedFile = event.target.files[0];
    },
    async uploadFile() {
      if (!this.selectedFile) {
        alert("请先选择文件");
        return;
      }

      const formData = new FormData();
      formData.append("file", this.selectedFile); // 将文件添加到 FormData 对象中

      try {
        // 使用 axios 发送 POST 请求，将文件上传到后端服务器
        const response = await this.$axios.post("/api/upload", formData, {
          headers: {
            "Content-Type": "multipart/form-data", // 设置请求头为 multipart/form-data
          },
        });
        console.log("文件上传成功:", response.data);
      } catch (error) {
        console.error("文件上传失败:", error);
      }
    },
  },
};
</script>

解释说明：

1. 模板部分 (<template>)：

   • 包含一个文件选择输入框 (<input type="file">) 和一个上传按钮。
   • 当用户选择文件时，触发 handleFileChange 方法；点击上传按钮时，触发 uploadFile 方法。

2. 脚本部分 (<script>)：

   • data 中定义了一个 selectedFile 变量，用于存储用户选择的文件。
   • handleFileChange 方法：当用户选择文件时，将文件保存到 selectedFile 中。
   • uploadFile 方法：首先检查是否选择了文件，然后创建一个 FormData 对象并将文件添加进去。接着使用 axios 发送 POST 请求，将文件上传到后端服务器。请求头设置为 multipart/form-data，以确保文件能够正确传输。

3. 注意事项：

   • 需要确保后端 API 路径 /api/upload 是正确的，并且后端已经配置好处理文件上传的逻辑。
   • 如果你没有集成 axios，可以使用原生的 fetch API 或其他 HTTP 客户端库来发送请求。