Vue封装一个简单轻量的上传文件组件的示例

CelestialScribe 上传于 2020-06-01 19:53

《Vue封装一个简单轻量的上传文件组件的示例》

在Web开发中，文件上传是常见的功能需求。无论是图片上传、文档提交还是数据导入，都需要一个稳定、易用的上传组件。Vue.js作为流行的前端框架，通过组件化开发可以高效地封装可复用的上传功能。本文将详细介绍如何基于Vue 3封装一个简单轻量的文件上传组件，涵盖基础功能实现、样式优化和错误处理等核心内容。

一、组件设计目标

在开始编码前，需要明确组件的核心功能：

支持单文件或多文件上传
显示上传进度和状态
提供文件类型和大小限制
支持拖拽上传
兼容主流浏览器

同时需保持组件轻量，避免引入过多依赖。我们将使用原生HTML5 API和Vue 3的Composition API实现核心功能。

二、基础组件实现

1. 创建组件结构

首先创建Vue单文件组件（SFC）结构：

2. 实现核心逻辑

使用Composition API管理组件状态：

3. 添加基础样式

三、功能增强

1. 添加Props和Events

使组件可配置化：

2. 实现真实上传

集成axios进行API调用：


// 首先安装axios: npm install axios
import axios from 'axios'

const uploadFiles = async () => {
  const formData = new FormData()
  files.value.forEach(item => {
    formData.append('files', item.file)
  })

  try {
    const response = await axios.post('/api/upload', formData, {
      onUploadProgress: (progressEvent) => {
        const progress = Math.round(
          (progressEvent.loaded * 100) / progressEvent.total
        )
        // 更新对应文件的进度
        // 实际实现需要跟踪每个文件的上传进度
      }
    })
    emit('upload-success', response.data)
  } catch (error) {
    emit('upload-error', error)
  }
}

3. 添加取消上传功能


// 在data中添加
const uploadTasks = ref([])

// 修改uploadFiles方法
const uploadFiles = async () => {
  files.value.forEach((item, index) => {
    item.status = '上传中'
    const formData = new FormData()
    formData.append('file', item.file)
    
    const source = axios.CancelToken.source()
    uploadTasks.value.push(source)
    
    axios.post('/api/upload', formData, {
      cancelToken: source.token,
      onUploadProgress: (progressEvent) => {
        item.progress = Math.round(
          (progressEvent.loaded * 100) / progressEvent.total
        )
      }
    }).then(() => {
      item.status = '上传成功'
    }).catch(err => {
      if (!axios.isCancel(err)) {
        item.status = '上传失败'
      }
    })
  })
}

// 添加取消方法
const cancelUpload = () => {
  uploadTasks.value.forEach(task => task.cancel())
  files.value.forEach(file => {
    if (file.status === '上传中') {
      file.status = '已取消'
    }
  })
  uploadTasks.value = []
}