当前位置：首页 > VUE

vue实现列表批量上传

2026-02-21 08:02:14VUE

实现列表批量上传功能

在Vue中实现列表批量上传功能，通常需要结合文件选择、预览、上传进度显示等环节。以下是实现方法：

文件选择与多选处理

使用HTML的input元素设置multiple属性，允许用户选择多个文件：

<input type="file" multiple @change="handleFileChange">

在Vue组件中处理文件选择事件：

data() {
  return {
    fileList: []
  }
},
methods: {
  handleFileChange(e) {
    this.fileList = Array.from(e.target.files)
  }
}

文件预览与列表展示

在模板中展示已选择的文件列表：

vue实现列表批量上传

<ul>
  <li v-for="(file, index) in fileList" :key="index">
    {{ file.name }} - {{ formatSize(file.size) }}
    <button @click="removeFile(index)">删除</button>
  </li>
</ul>

添加辅助方法格式化文件大小：

methods: {
  formatSize(bytes) {
    if (bytes === 0) return '0 Bytes'
    const k = 1024
    const sizes = ['Bytes', 'KB', 'MB', 'GB']
    const i = Math.floor(Math.log(bytes) / Math.log(k))
    return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i]
  },
  removeFile(index) {
    this.fileList.splice(index, 1)
  }
}

批量上传实现

使用axios或fetch API实现批量上传，可以配合FormData：

vue实现列表批量上传

methods: {
  async uploadFiles() {
    if (this.fileList.length === 0) return

    const formData = new FormData()
    this.fileList.forEach(file => {
      formData.append('files[]', file)
    })

    try {
      const response = await axios.post('/api/upload', formData, {
        headers: {
          'Content-Type': 'multipart/form-data'
        },
        onUploadProgress: progressEvent => {
          const percentCompleted = Math.round(
            (progressEvent.loaded * 100) / progressEvent.total
          )
          console.log(percentCompleted)
        }
      })
      console.log('上传成功', response.data)
    } catch (error) {
      console.error('上传失败', error)
    }
  }
}

进度显示优化

添加进度条组件显示上传进度：

<progress :value="progress" max="100"></progress>
<span>{{ progress }}%</span>

在data中添加progress属性，并在上传方法中更新：

data() {
  return {
    progress: 0
  }
},
methods: {
  async uploadFiles() {
    // ...
    onUploadProgress: progressEvent => {
      this.progress = Math.round(
        (progressEvent.loaded * 100) / progressEvent.total
      )
    }
    // ...
  }
}

断点续传支持（高级）

对于大文件，可以实现分片上传：

const CHUNK_SIZE = 5 * 1024 * 1024 // 5MB

async uploadChunks(file) {
  const chunks = Math.ceil(file.size / CHUNK_SIZE)
  for (let i = 0; i < chunks; i++) {
    const start = i * CHUNK_SIZE
    const end = Math.min(start + CHUNK_SIZE, file.size)
    const chunk = file.slice(start, end)

    const formData = new FormData()
    formData.append('chunk', chunk)
    formData.append('chunkIndex', i)
    formData.append('totalChunks', chunks)
    formData.append('fileId', file.uniqueId)

    await axios.post('/api/upload-chunk', formData)
  }
}