vue3 文件上传

// Vue3 文件上传示例代码

<template>
  <div>
    <input type="file" @change="handleFileChange" />
    <button @click="uploadFile">上传文件</button>
  </div>
</template>

<script>
import { ref } from 'vue';
import axios from 'axios';

export default {
  setup() {
    const file = ref(null);

    // 处理文件选择事件
    const handleFileChange = (event) => {
      file.value = event.target.files[0];
    };

    // 上传文件到服务器
    const uploadFile = async () => {
      if (!file.value) {
        alert('请选择一个文件');
        return;
      }

      const formData = new FormData();
      formData.append('file', file.value);

      try {
        await axios.post('https://example.com/upload', formData, {
          headers: {
            'Content-Type': 'multipart/form-data',
          },
        });
        alert('文件上传成功');
      } catch (error) {
        console.error('文件上传失败:', error);
        alert('文件上传失败');
      }
    };

    return {
      handleFileChange,
      uploadFile,
    };
  },
};
</script>

<style scoped>
/* 样式可以根据需要自行添加 */
</style>

解释说明：

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

   • 包含一个 input 元素，类型为 file，用于选择文件。
   • 包含一个按钮，点击后触发 uploadFile 方法进行文件上传。

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

   • 使用 ref 创建了一个响应式的 file 变量，用于存储用户选择的文件。
   • handleFileChange 方法：当用户选择文件时，将选中的文件赋值给 file 变量。
   • uploadFile 方法：检查是否有文件被选中，如果有则创建 FormData 对象并使用 axios 将文件上传到指定的服务器端点。上传成功或失败时会弹出相应的提示信息。

3. 样式部分 (<style scoped>):

   • 可以根据实际需求添加样式，这里留空供后续扩展。

希望这个示例能帮助你理解如何在 Vue3 中实现文件上传功能。