Vue 实战：打造高效的文件上传组件

引子

文件上传是前端开发中常见的需求，而 Vue 组件库中的现成解决方案固然便捷，但自研组件能更深入地理解文件上传机制，满足个性化需求。本文将详细介绍如何使用 Vue 构建一个定制化的文件上传组件。

技术栈

• Vue.js
• Node.js

步骤

1. 设置服务器端

首先，需要使用 Node.js 设置一个服务器端来处理文件上传请求。这部分的实现因具体框架和部署环境而异，此处不再赘述。

2. 创建 Vue 组件

创建一个新的 Vue 组件，名为 FileUpload。在组件中，定义以下属性和方法：

export default {
  props: ['multiple', 'accept'],
  data() {
    return {
      files: [],
      progress: 0
    };
  },
  methods: {
    // 文件选择器改变事件
    handleFileChange(e) {
      this.files = e.target.files;
    },
    // 文件上传
    uploadFile() {
      // 使用 FormData 上传文件
      const formData = new FormData();
      this.files.forEach(file => formData.append('file', file));

      axios.post('/upload', formData, {
        onUploadProgress: e => {
          this.progress = Math.round(e.loaded / e.total * 100);
        }
      })
      .then(res => {
        // 上传成功处理
      })
      .catch(err => {
        // 上传失败处理
      });
    }
  }
};

3. 编写模板

创建 FileUpload.vue 模板，包括文件输入控件、上传按钮和进度条。

<template>
  <div>
    <input type="file" multiple :accept="accept" @change="handleFileChange" />
    <button @click="uploadFile">上传</button>
    <progress v-if="progress > 0" :value="progress"></progress>
  </div>
</template>

4. 使用组件

在父组件中使用 FileUpload 组件，传递必要的属性，如允许多选和接受的文件类型。

<template>
  <file-upload multiple accept="image/*"></file-upload>
</template>

5. 样式定制

根据需要为 FileUpload 组件添加样式，定制外观和布局。

总结

通过上述步骤，可以创建一个功能齐全的文件上传组件。它允许用户选择文件、实时显示上传进度，并处理上传成功或失败事件。本组件的实现有助于开发者理解文件上传的底层机制，并满足更灵活的应用场景。