vue3实现 附件上传简单代码示例【自用】

<template>
  <div>
    <input type="file" @change="handleFileChange" />
    <button @click="uploadFile">上传</button>
  </div>
</template>
 
<script setup>
import { ref } from 'vue';
 
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>

这段代码展示了如何在Vue 3中使用Composition API实现文件的选择和上传功能。用户可以通过点击input选择文件，然后点击button进行上传。上传操作使用了fetch API和FormData对象。这个例子简单易懂，适合作为学习Vue文件上传功能的参考。