Vue3 文件上传组件

以下是使用 Vue3 编写的简单的文件上传功能示例：

在 Vue 项目中安装axios和vue3-file-upload：

npm install axios vue3-file-upload

创建一个组件FileUpload.vue：

<template>
  <div>
    <input type='file' ref='fileInput' @change='handleFileChange' />
    <button @click='uploadFile'>上传文件</button>
    <progress :value='uploadProgress' max='100'></progress>
  </div>
</template>

<script>
import { ref } from 'vue';
import axios from 'axios';
import FileUpload from 'vue3-file-upload';

export default {
  components: { FileUpload },
  setup() {
    const fileInput = ref(null);
    const uploadProgress = ref(0);
    const uploadFile = ref(null);

    const handleFileChange = () => {
      // 获取选定的文件
      const file = fileInput.value.files[0];
      // 将文件存储到组件的状态中
      uploadFile.value = file;
    };

    const uploadFile = () => {
      // 创建FormData对象，用于存储文件数据
      const formData = new FormData();
      formData.append('file', uploadFile.value);

      // 使用axios提交文件数据
      axios
        .post('/upload', formData, {
          onUploadProgress: (progressEvent) => {
            // 更新上传进度
            uploadProgress.value =
              Math.round((progressEvent.loaded / progressEvent.total) * 100);
          },
        })
        .then((response) => {
          // 处理服务器返回的响应数据
        })
        .catch((error) => {
          // 处理请求错误
        });
    };

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

在handleFileChange方法中获取选定的文件，并将其存储到组件的状态中：

const handleFileChange = () => {
  // 获取选定的文件
  const file = fileInput.value.files[0];
  // 将文件存储到组件的状态中
  uploadFile.value = file;
};

在uploadFile方法中使用axios将文件上传到服务器，并更新上传进度：

const uploadFile = () => {
  // 创建FormData对象，用于存储文件数据
  const formData = new FormData();
  formData.append('file', uploadFile.value);

  // 使用axios提交文件数据
  axios
    .post('/upload', formData, {
      onUploadProgress: (progressEvent) => {
        // 更新上传进度
        uploadProgress.value =
          Math.round((progressEvent.loaded / progressEvent.total) * 100);
      },
    })
    .then((response) => {
      // 处理服务器返回的响应数据
    })
    .catch((error) => {
      // 处理请求错误
    });
};

最后，在FileUpload.vue组件中使用FileUpload组件来显示文件上传进度：

<template>
  <div>
    <input type='file' ref='fileInput' @change='handleFileChange' />
    <button @click='uploadFile'>上传文件</button>
    <FileUpload :progress='uploadProgress' />
  </div>
</template>

<script>
import { ref } from 'vue';
import axios from 'axios';
import FileUpload from 'vue3-file-upload';

export default {
  components: { FileUpload },
  setup() {
    const fileInput = ref(null);
    const uploadFile = ref(null);
    const uploadProgress = ref(0);

    const handleFileChange = () => {
      // 获取选定的文件
      const file = fileInput.value.files[0];
      // 将文件存储到组件的状态中
      uploadFile.value = file;
    };

    const uploadFile = () => {
      // 创建FormData对象，用于存储文件数据
      const formData = new FormData();
      formData.append('file', uploadFile.value);

      // 使用axios提交文件数据
      axios
        .post('/upload', formData, {
          onUploadProgress: (progressEvent) => {
            // 更新上传进度
            uploadProgress.value =
              Math.round((progressEvent.loaded / progressEvent.total) * 100);
          },
        })
        .then((response) => {
          // 处理服务器返回的响应数据
        })
        .catch((error) => {
          // 处理请求错误
        });
    };

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

这段代码展示了如何使用 Vue3 创建一个简单的文件上传组件，并提供了详细的步骤和代码示例。该组件使用 axios 库来实现文件上传功能，并使用 vue3-file-upload 组件来显示上传进度。

希望这份指南能够帮助您更好地理解 Vue3 的文件上传功能，并轻松地在您的项目中集成该功能。