vue 实现文件上传

2026-03-28 07:00:32VUE

使用 Vue 实现文件上传

基础文件上传实现

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

<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 fetch('https://your-api-endpoint', {
          method: 'POST',
          body: formData
        })
        console.log('上传成功:', await response.json())
      } catch (error) {
        console.error('上传失败:', error)
      }
    }
  }
}
</script>

使用 axios 进行文件上传

axios 是更常用的 HTTP 客户端，支持文件上传：

import axios from 'axios'

methods: {
  async submitFile() {
    if (!this.file) return

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

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

多文件上传实现

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

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

methods: {
  handleMultipleFiles(event) {
    this.files = Array.from(event.target.files)
  },
  async submitFiles() {
    if (!this.files.length) return

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

    // 使用axios或fetch发送请求
  }
}

上传进度显示

axios 支持上传进度跟踪：

const response = await axios.post('https://your-api-endpoint', formData, {
  headers: {
    'Content-Type': 'multipart/form-data'
  },
  onUploadProgress: progressEvent => {
    const percentCompleted = Math.round(
      (progressEvent.loaded * 100) / progressEvent.total
    )
    console.log(`上传进度: ${percentCompleted}%`)
    // 可以更新Vue data中的进度值用于UI显示
  }
})

文件预览功能

在上传前预览图片文件：

methods: {
  handleFileUpload(event) {
    const file = event.target.files[0]
    if (!file) return

    if (file.type.startsWith('image/')) {
      const reader = new FileReader()
      reader.onload = e => {
        this.previewUrl = e.target.result
      }
      reader.readAsDataURL(file)
    }

    this.file = file
  }
}

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

文件验证

添加文件类型和大小验证：

methods: {
  handleFileUpload(event) {
    const file = event.target.files[0]
    if (!file) return

    // 文件类型验证
    const allowedTypes = ['image/jpeg', 'image/png', 'application/pdf']
    if (!allowedTypes.includes(file.type)) {
      alert('不支持的文件类型')
      return
    }

    // 文件大小验证 (2MB)
    const maxSize = 2 * 1024 * 1024
    if (file.size > maxSize) {
      alert('文件大小超过限制')
      return
    }

    this.file = file
  }
}

使用第三方库

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

vue-dropzone - 提供拖放上传功能
vue-upload-component - 功能丰富的上传组件
uppy - 功能强大的文件上传工具，有Vue集成

服务器端注意事项

确保服务器端正确处理multipart/form-data请求。对于Node.js Express服务器，可以使用multer中间件：

vue 实现文件上传

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

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