当前位置：首页 > VUE

Vue实现图片批量上传

2026-01-21 05:39:26VUE

Vue 图片批量上传实现方法

准备工作

安装必要依赖（如axios、element-ui等），确保项目基于Vue 2/3环境。以Vue 3 + Element Plus为例：

npm install axios element-plus

基础组件结构

使用<input type="file">配合multiple属性实现多选，通过@change事件监听文件选择：

<template>
  <div>
    <input 
      type="file" 
      multiple 
      accept="image/*" 
      @change="handleFileChange"
    >
    <button @click="uploadFiles">批量上传</button>
  </div>
</template>

文件选择处理

在data或setup中定义响应式变量存储文件列表，通过event.target.files获取文件对象数组：

Vue实现图片批量上传

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

上传逻辑实现

使用FormData封装文件数据，通过axios发送 multipart/form-data 请求：

methods: {
  async uploadFiles() {
    const formData = new FormData()
    this.fileList.forEach(file => {
      formData.append('files[]', file)  // 注意服务端接收的字段名
    })

    try {
      const res = await axios.post('/api/upload', formData, {
        headers: { 'Content-Type': 'multipart/form-data' }
      })
      console.log('上传成功', res.data)
    } catch (error) {
      console.error('上传失败', error)
    }
  }
}

进度显示优化

添加上传进度条功能，通过axios的onUploadProgress回调：

Vue实现图片批量上传

uploadFiles() {
  const config = {
    onUploadProgress: progressEvent => {
      const percent = Math.round(
        (progressEvent.loaded * 100) / progressEvent.total
      )
      console.log(`进度: ${percent}%`)
    }
  }
  axios.post('/api/upload', formData, config)
}

服务端配合示例（Node.js）

使用multer处理多文件上传的Express路由示例：

const multer = require('multer')
const upload = multer({ dest: 'uploads/' })

app.post('/api/upload', upload.array('files[]'), (req, res) => {
  console.log(req.files) // 获取上传文件信息
  res.json({ success: true })
})

高级功能扩展

文件类型/大小验证：在handleFileChange中添加校验逻辑
图片预览：使用URL.createObjectURL生成临时预览链接
分片上传：对大文件进行切片处理
并发控制：通过Promise.all限制并发请求数

完整组件示例

结合Element UI的上传组件实现更完整的UI：

<template>
  <el-upload
    multiple
    action="/api/upload"
    :auto-upload="false"
    :on-change="handleChange"
    :file-list="fileList">
    <el-button type="primary">选择文件</el-button>
  </el-upload>
</template>