vue实现多文件上传

使用 Vue 实现多文件上传

前端实现

在 Vue 中实现多文件上传可以通过 <input type="file"> 元素结合 FormData 对象来完成。以下是一个基本实现示例：

<template>
  <div>
    <input type="file" multiple @change="handleFileChange" />
    <button @click="uploadFiles">上传文件</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      files: []
    }
  },
  methods: {
    handleFileChange(event) {
      this.files = Array.from(event.target.files)
    },
    async uploadFiles() {
      if (this.files.length === 0) return

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

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

后端处理

后端需要处理 multipart/form-data 格式的请求。以下是 Node.js Express 服务器的示例：

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

const app = express()

app.post('/api/upload', upload.array('files'), (req, res) => {
  console.log('接收到的文件:', req.files)
  res.json({ message: '文件上传成功', files: req.files })
})

app.listen(3000, () => {
  console.log('服务器运行在 http://localhost:3000')
})

进度显示

可以添加上传进度显示功能：

<template>
  <div>
    <input type="file" multiple @change="handleFileChange" />
    <button @click="uploadFiles">上传文件</button>
    <div v-if="progress > 0">
      上传进度: {{ progress }}%
      <progress :value="progress" max="100"></progress>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      files: [],
      progress: 0
    }
  },
  methods: {
    async uploadFiles() {
      const config = {
        headers: {
          'Content-Type': 'multipart/form-data'
        },
        onUploadProgress: progressEvent => {
          this.progress = Math.round(
            (progressEvent.loaded * 100) / progressEvent.total
          )
        }
      }

      await axios.post('/api/upload', formData, config)
    }
  }
}
</script>

文件类型和大小限制

可以在前端添加验证：

handleFileChange(event) {
  const files = Array.from(event.target.files)
  const maxSize = 10 * 1024 * 1024 // 10MB
  const allowedTypes = ['image/jpeg', 'image/png', 'application/pdf']

  this.files = files.filter(file => {
    if (file.size > maxSize) {
      alert(`${file.name} 超过大小限制`)
      return false
    }
    if (!allowedTypes.includes(file.type)) {
      alert(`${file.name} 类型不支持`)
      return false
    }
    return true
  })
}

拖放上传

可以实现拖放功能提升用户体验：

<div 
  @dragover.prevent="dragover = true"
  @dragleave="dragover = false"
  @drop.prevent="handleDrop"
  :class="{ 'drag-over': dragover }"
>
  拖放文件到此处
  <input type="file" multiple @change="handleFileChange" />
</div>

data() {
  return {
    dragover: false
  }
},
methods: {
  handleDrop(event) {
    this.dragover = false
    this.handleFileChange(event)
  }
}

文件预览

可以在上传前显示文件预览：

<div v-for="(file, index) in files" :key="index">
  <img v-if="file.type.startsWith('image/')" 
       :src="URL.createObjectURL(file)" 
       width="100" />
  <div>{{ file.name }} ({{ (file.size / 1024).toFixed(2) }}KB)</div>
</div>

这些方法提供了完整的 Vue 多文件上传解决方案，包括前端实现、后端处理、进度显示、验证和用户体验增强功能。