Vue 3中的文件上传功能实现：从基础到高级

文件上传功能在现代Web应用中非常常见，Vue 3作为目前最流行的前端框架之一，提供了强大的工具和方法来实现这一功能。本文将从基础到高级逐步讲解如何在Vue 3项目中实现文件上传功能。

基础概念

首先，了解HTML中的<input type="file">标签是实现文件上传的基础。这个标签允许用户选择一个或多个文件，并通过JavaScript获取这些文件对象。

<input type="file" id="fileInput">

通过JavaScript，可以访问选中的文件：

const files = document.getElementById('fileInput').files;

Vue 3中的基本实现

在Vue 3中，可以通过v-model绑定输入框的值。然而，对于文件上传，由于文件对象不能直接绑定到v-model，因此需要使用ref来手动处理文件选择事件。

<template>
  <input type="file" @change="handleFileChange">
</template>

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

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

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

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

高级功能：多文件上传与预览

为了支持多文件上传，可以在<input>标签上添加multiple属性，并且为用户提供文件预览功能。

<template>
  <div>
    <input type="file" multiple @change="handleFilesChange">
    <div v-for="(preview, index) in previews" :key="index">
      <img :src="preview" alt="Preview" width="100">
    </div>
  </div>
</template>

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

export default {
  setup() {
    const files = ref([]);
    const previews = ref([]);

    const handleFilesChange = (event) => {
      const selectedFiles = Array.from(event.target.files);
      files.value = selectedFiles;
      previews.value = selectedFiles.map(file => URL.createObjectURL(file));
    };

    return { handleFilesChange, previews };
  }
};
</script>

使用Axios进行文件上传

当文件被选择后，通常需要将其发送到服务器。这里我们可以使用Axios库来完成这一任务。

import axios from 'axios';

const uploadFile = async () => {
  const formData = new FormData();
  formData.append('file', file.value);

  try {
    const response = await axios.post('/upload', formData, {
      headers: {
        'Content-Type': 'multipart/form-data'
      }
    });
    console.log(response.data);
  } catch (error) {
    console.error('There was an error!', error);
  }
};

错误处理与进度显示

在实际应用中，还需要考虑错误处理和上传进度显示。Axios提供了一个onUploadProgress选项，可以用来跟踪上传进度。

graph TD;
    A[开始] --> B{文件是否有效};
    B --否--> C[显示错误信息];
    B --是--> D[创建FormData];
    D --> E[配置Axios请求];
    E --> F[发起上传请求];
    F --> G{上传是否成功};
    G --否--> H[显示错误信息];
    G --是--> I[更新UI];

总结

通过上述步骤，我们已经实现了从基础到高级的文件上传功能。这包括了单文件上传、多文件上传、文件预览以及使用Axios进行文件上传和进度跟踪。