vue 实现上传文件

2026-02-20 07:32:45VUE

Vue 实现文件上传的方法

使用原生 HTML5 文件上传

在 Vue 组件中可以直接使用 HTML5 的 <input type="file"> 元素实现文件上传：

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

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

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

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

使用第三方组件库

对于更复杂的需求，可以使用 Element UI 或 Vuetify 等 UI 库提供的上传组件：

<template>
  <el-upload
    action="/api/upload"
    :on-success="handleSuccess"
    :on-error="handleError"
    :before-upload="beforeUpload">
    <el-button size="small" type="primary">点击上传</el-button>
  </el-upload>
</template>

<script>
export default {
  methods: {
    handleSuccess(response) {
      console.log('上传成功', response)
    },
    handleError(error) {
      console.error('上传失败', error)
    },
    beforeUpload(file) {
      const isLt2M = file.size / 1024 / 1024 < 2
      if (!isLt2M) {
        this.$message.error('上传文件大小不能超过 2MB!')
        return false
      }
      return true
    }
  }
}
</script>

文件上传进度显示

可以通过 axios 的 onUploadProgress 回调显示上传进度：

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

  axios.post('/api/upload', formData, {
    headers: {
      'Content-Type': 'multipart/form-data'
    },
    onUploadProgress: progressEvent => {
      const percentCompleted = Math.round(
        (progressEvent.loaded * 100) / progressEvent.total
      )
      console.log(`上传进度: ${percentCompleted}%`)
    }
  })
}

多文件上传处理

处理多个文件上传时，可以修改 handleFileUpload 方法：

handleFileUpload(event) {
  this.selectedFiles = Array.from(event.target.files)
},
uploadFiles() {
  const formData = new FormData()
  this.selectedFiles.forEach(file => {
    formData.append('files[]', file)
  })

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

文件类型和大小验证

在文件上传前进行验证：

beforeUpload(file) {
  const allowedTypes = ['image/jpeg', 'image/png', 'application/pdf']
  const isAllowedType = allowedTypes.includes(file.type)
  const isLt5M = file.size / 1024 / 1024 < 5

  if (!isAllowedType) {
    alert('只允许上传 JPG, PNG 或 PDF 文件!')
    return false
  }

  if (!isLt5M) {
    alert('文件大小不能超过 5MB!')
    return false
  }

  return true
}

服务器端处理

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 中实现文件上传的主要场景，可以根据具体需求选择适合的方式。

vue 实现上传文件