在近年来，前端开发技术飞速发展，很多公司和团队都在使用 Vue.js 来构建高效、现代的前端应用程序。在日常开发中，文件上传功能是一个非常常见的需求。本文将带你一步步使用 Vue 3 创建一个简单且实用的文件上传组件，并且展示如何处理上传的文件。

项目初始化

首先，我们需要创建一个 Vue 3 项目。如果你还没有使用过 Vue 3，可以通过如下命令创建一个新的 Vue 3 项目：

npm init vue@latest

按照提示完成项目初始化，安装依赖后，我们就可以开始编写组件了。

创建文件上传组件

接下来，我们创建一个名为 FileUpload.vue 的文件上传组件。在项目的 src 目录下新建一个 components 文件夹，并在其中创建 FileUpload.vue 文件。

<template>
  <div class="file-upload">
    <input type="file" @change="handleFileChange" />
    <button @click="uploadFile">Upload</button>
    <p v-if="file">{{ file.name }}</p>
  </div>
</template>

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

export default {
  name: 'FileUpload',
  setup() {
    const file = ref(null);

    const handleFileChange = (event) => {
      const selectedFile = event.target.files[0];
      file.value = selectedFile;
    };

    uploadFile = async () => {
      if (!file.value) {
        alert('Please select a file first.');
        return;
      }

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

        const response = await fetch('YOUR_UPLOAD_URL_HERE', {
          method: 'POST',
          body: formData,
        });

        if (!response.ok) {
          throw new Error('File upload failed.');
        }

        const result = await response.json();
        console.log('File uploaded successfully:', result);
        alert('File uploaded successfully!');
      } catch (error) {
        console.error('Error uploading file:', error);
        alert('Error uploading file.');
      }
    };

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

<style scoped>
.file-upload {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.file-upload input {
  margin-bottom: 10px;
}

.file-upload button {
  margin-bottom: 10px;
}
</style>

解释和注意事项

1. <template> 部分：

   • 包含一个文件输入框和一个上传按钮。
   • 文件输入框通过 @change 事件监听文件选择。
   • 文件名在用户选择文件后显示。

2. <script> 部分：

   • 使用 Vue 3 的组合式 API（Composition API）。
   • handleFileChange 函数用于处理文件选择，并将文件存储在 ref 对象中。
   • uploadFile 函数负责处理文件上传，通过 fetch POST 请求至文件上传接口。
   • 异常处理和简单的提示信息。

3. <style> 部分：

   • 使用 scoped CSS 来保证样式仅作用于此组件。

集成组件到主应用

组件创建完成后，我们需要将其集成到主应用中。在 src 目录下的 App.vue 文件中进行如下修改：

<template>
  <div id="app">
    <h1>Vue 3 File Upload Example</h1>
    <FileUpload />
  </div>
</template>

<script>
import FileUpload from './components/FileUpload.vue';

export default {
  name: 'App',
  components: {
    FileUpload,
  },
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  margin-top: 60px;
}
</style>

运行项目

完成以上步骤后，返回命令行，运行以下命令启动开发服务器：

npm run serve

浏览器中打开 http://localhost:8080 即可看到文件上传组件的效果。

文件处理与自定义

1. 后端接口

这个示例代码中的上传 URL (YOUR_UPLOAD_URL_HERE) 需要你自己的后端处理接口。如果你没有后端服务，可以使用一些现有的云存储服务或 mock 一些 API 进行测试。

2. 验证文件类型

如果需要限制文件类型，可以在 handleFileChange 函数中添加校验逻辑：

const allowedTypes = ['image/jpeg', 'image/png', 'application/pdf'];
if (!allowedTypes.includes(selectedFile.type)) {
  alert('Invalid file type selected.');
  return;
}

3. 进度显示

可以进一步优化组件，如添加文件上传进度显示。此功能可以通过 XMLHttpRequest 来实现动态展示上传进度。

const uploadFile = () => {
  const xhr = new XMLHttpRequest();

  xhr.upload.addEventListener('progress', (event) => {
    if (event.lengthComputable) {
      const percentComplete = (event.loaded / event.total) * 100;
      console.log(`Upload progress: ${percentComplete}%`);
    }
  });

  xhr.addEventListener('load', () => {
    if (xhr.status === 200) {
      console.log('File uploaded successfully:', xhr.responseText);
      alert('File uploaded successfully!');
    } else {
      console.error('Error uploading file:', xhr.status, xhr.statusText);
      alert('Error uploading file.');
    }
  });

  xhr.open('POST', 'YOUR_UPLOAD_URL_HERE');
  xhr.send(formData);
};

总结

通过本文，你学到了如何在 Vue 3 中创建一个简单的文件上传组件，并且了解了如何处理上传的文件。这个组件虽然简单，但在实际开发中相当有用。你可以根据项目需求进一步优化和扩展文件上传功能。

---

最后问候亲爱的朋友们，并邀请你们阅读我的全新著作