vue 实现文件上传

2026-03-08 08:38:47VUE

文件上传基础实现

使用Vue结合HTML的<input type="file">元素实现基础文件上传功能。通过@change事件监听文件选择，获取文件对象后可通过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() {
      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>

多文件上传支持

通过添加multiple属性允许选择多个文件，遍历files数组处理多个文件上传。

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

<script>
methods: {
  handleMultiFileUpload(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/multi-upload', formData)
  }
}
</script>

拖拽上传实现

利用HTML5拖拽API实现更友好的拖放上传体验，需要处理dragover、dragleave和drop事件。

vue 实现文件上传

<div 
  @dragover.prevent="dragOver"
  @dragleave.prevent="dragLeave"
  @drop.prevent="dropFile"
  :class="{ 'drag-active': isDragActive }"
>
  拖拽文件到此处
</div>

<script>
data() {
  return {
    isDragActive: false
  }
},
methods: {
  dragOver() {
    this.isDragActive = true
  },
  dragLeave() {
    this.isDragActive = false
  },
  dropFile(event) {
    this.isDragActive = false
    this.file = event.dataTransfer.files[0]
  }
}
</script>

上传进度显示

利用axios的onUploadProgress回调实现上传进度可视化，配合进度条组件展示实时进度。

<progress :value="uploadProgress" max="100"></progress>

<script>
methods: {
  async submitFile() {
    const config = {
      headers: { 'Content-Type': 'multipart/form-data' },
      onUploadProgress: progressEvent => {
        this.uploadProgress = Math.round(
          (progressEvent.loaded * 100) / progressEvent.total
        )
      }
    }

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

文件类型和大小验证

在上传前对文件进行验证，确保符合要求的类型和大小限制。

vue 实现文件上传

methods: {
  validateFile(file) {
    const validTypes = ['image/jpeg', 'image/png']
    const maxSize = 2 * 1024 * 1024 // 2MB

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

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

    return true
  },

  handleFileUpload(event) {
    const file = event.target.files[0]
    if (this.validateFile(file)) {
      this.file = file
    }
  }
}

第三方组件库集成

使用如vue-dropzone等专门的上传组件可以快速实现更复杂的功能。

import vue2Dropzone from 'vue2-dropzone'

export default {
  components: { vueDropzone: vue2Dropzone },
  methods: {
    onSuccess(file, response) {
      console.log('文件上传成功', response)
    },
    onError(file, message) {
      console.error('上传错误', message)
    }
  }
}

<vue-dropzone
  ref="myVueDropzone"
  id="dropzone"
  :options="dropzoneOptions"
  @vdropzone-success="onSuccess"
  @vdropzone-error="onError"
></vue-dropzone>

服务器端处理示例

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: '文件上传成功', file: req.file })
})

每个实现方案可根据实际需求组合使用，建议根据项目复杂度选择合适的方法。基础项目可使用原生HTML5实现，复杂场景可考虑专业组件库。