vue实现上传

2026-03-27 15:59:43VUE

Vue 实现文件上传

Vue 中实现文件上传通常结合 HTML 的 <input type="file"> 元素和 JavaScript 的 FormData 对象，通过 HTTP 请求将文件发送到服务器。

基本实现方法

创建一个文件上传组件，监听文件选择事件并处理上传逻辑：

<template>
  <div>
    <input type="file" @change="handleFileUpload" />
    <button @click="submitFile">上传</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      file: null
    }
  },
  methods: {
    handleFileUpload(event) {
      this.file = event.target.files[0]
    },
    async submitFile() {
      if (!this.file) return

      const formData = new FormData()
      formData.append('file', this.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>

使用第三方库

对于更复杂的需求，可以使用专门的文件上传库：

vue-dropzone：提供拖放上传功能
```
npm install vue2-dropzone
```
vue-upload-component：功能丰富的上传组件
```
npm install vue-upload-component
```

进度显示

实现上传进度显示可以增强用户体验：

vue实现上传

async submitFile() {
  const config = {
    onUploadProgress: progressEvent => {
      const percentCompleted = Math.round(
        (progressEvent.loaded * 100) / progressEvent.total
      )
      console.log(percentCompleted)
    }
  }

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

多文件上传

支持同时选择多个文件并上传：

<input type="file" multiple @change="handleFileUpload" />

handleFileUpload(event) {
  this.files = Array.from(event.target.files)
}

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

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

文件验证

在上传前验证文件类型和大小：

handleFileUpload(event) {
  const file = event.target.files[0]
  const allowedTypes = ['image/jpeg', 'image/png']
  const maxSize = 2 * 1024 * 1024 // 2MB

  if (!allowedTypes.includes(file.type)) {
    alert('仅支持JPEG和PNG格式')
    return
  }

  if (file.size > maxSize) {
    alert('文件大小不能超过2MB')
    return
  }

  this.file = file
}

服务器端处理

Node.js Express 示例处理上传文件：

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

app.post('/api/upload', upload.single('file'), (req, res) => {
  console.log(req.file)
  res.json({ message: '文件上传成功' })
})

这些方法涵盖了 Vue 中实现文件上传的主要场景和技术要点，可以根据具体需求选择合适的实现方式。