vue文件上传怎么实现

2026-02-21 11:51:16VUE

前端实现文件上传

在Vue中实现文件上传通常需要结合HTML的<input type="file">元素和FormData对象。创建一个文件上传组件的基本步骤如下：

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

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

      const formData = new FormData()
      formData.append('file', this.selectedFile)

      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>

后端API处理

后端需要设置相应的API接口来接收上传的文件。以下是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) => {
  if (!req.file) {
    return res.status(400).send('没有文件上传')
  }
  res.json({
    filename: req.file.filename,
    originalname: req.file.originalname,
    size: req.file.size
  })
})

文件上传进度显示

对于大文件上传，显示上传进度可以提升用户体验。axios提供了上传进度事件：

vue文件上传怎么实现

async uploadFile() {
  const config = {
    headers: { 'Content-Type': 'multipart/form-data' },
    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="handleFilesChange" />

handleFilesChange(event) {
  this.selectedFiles = Array.from(event.target.files)
},
uploadFiles() {
  const formData = new FormData()
  this.selectedFiles.forEach(file => {
    formData.append('files', file)
  })
  // 后续上传逻辑相同
}

后端需要相应调整：

vue文件上传怎么实现

app.post('/api/upload', upload.array('files', 10), (req, res) => {
  // req.files 现在是文件数组
})

文件类型和大小限制

在前端和后端都应添加验证逻辑确保上传文件的安全性：

// 前端验证
handleFileChange(event) {
  const file = event.target.files[0]
  const allowedTypes = ['image/jpeg', 'image/png']
  const maxSize = 5 * 1024 * 1024 // 5MB

  if (!allowedTypes.includes(file.type)) {
    alert('只支持JPEG和PNG格式')
    return
  }
  if (file.size > maxSize) {
    alert('文件大小不能超过5MB')
    return
  }
  this.selectedFile = file
}

后端验证：

const upload = multer({
  dest: 'uploads/',
  limits: { fileSize: 5 * 1024 * 1024 },
  fileFilter: (req, file, cb) => {
    if (['image/jpeg', 'image/png'].includes(file.mimetype)) {
      cb(null, true)
    } else {
      cb(new Error('不支持的文件类型'), false)
    }
  }
})

文件预览功能

对于图片文件，可以在上传前显示预览：

<img v-if="previewUrl" :src="previewUrl" width="200" />

handleFileChange(event) {
  const file = event.target.files[0]
  if (file && file.type.match('image.*')) {
    const reader = new FileReader()
    reader.onload = e => {
      this.previewUrl = e.target.result
    }
    reader.readAsDataURL(file)
  }
  this.selectedFile = file
}