vue3实现文件上传

在Vue 3中实现文件上传，你可以创建一个包含<input type="file">的组件，并使用Vue的ref来引用这个输入元素，然后监听它的change事件来处理文件上传的逻辑。以下是一个简单的例子：

<template>
  <div>
    <input type="file" ref="fileInput" @change="handleFileChange" />
    <button @click="uploadFile">上传</button>
  </div>
</template>
 
<script setup>
import { ref } from 'vue';
 
const fileInput = ref(null);
const selectedFile = ref(null);
 
const handleFileChange = (event) => {
  selectedFile.value = event.target.files[0];
};
 
const uploadFile = async () => {
  if (!selectedFile.value) {
    alert('请选择一个文件');
    return;
  }
 
  const formData = new FormData();
  formData.append('file', selectedFile.value);
 
  try {
    const response = await fetch('YOUR_API_ENDPOINT', {
      method: 'POST',
      body: formData,
    });
    if (response.ok) {
      alert('上传成功');
    } else {
      alert('上传失败');
    }
  } catch (error) {
    alert('上传异常');
  }
};
</script>

在这个例子中，当文件选择发生变化时，handleFileChange函数会被调用，并将选中的文件存储在selectedFile变量中。当用户点击上传按钮时，uploadFile函数会被调用，它会创建一个FormData对象，将选中的文件添加进去，然后发送一个POST请求到服务器上传文件。服务器的API端点需要替换为你实际使用的API地址。