vue实现文件上传前后

Vue 文件上传前后端实现

前端实现（Vue）

在 Vue 中实现文件上传通常需要使用 <input type="file"> 元素，并结合 FormData 对象将文件数据发送到后端。

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

<script>
export default {
  data() {
    return {
      file: null
    }
  },
  methods: {
    handleFileUpload(event) {
      this.file = event.target.files[0]
    },
    async uploadFile() {
      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>

后端实现（Node.js Express）

后端接收文件需要使用中间件如 multer 来处理 multipart/form-data 格式的请求。

const express = require('express')
const multer = require('multer')
const path = require('path')

const app = express()

// 配置 multer 存储
const storage = multer.diskStorage({
  destination: (req, file, cb) => {
    cb(null, 'uploads/')
  },
  filename: (req, file, cb) => {
    cb(null, Date.now() + path.extname(file.originalname))
  }
})

const upload = multer({ storage })

app.post('/api/upload', upload.single('file'), (req, res) => {
  if (!req.file) {
    return res.status(400).send('没有文件被上传')
  }
  res.json({
    message: '文件上传成功',
    filename: req.file.filename,
    path: req.file.path
  })
})

app.listen(3000, () => {
  console.log('服务器运行在 http://localhost:3000')
})

文件上传进度显示

在 Vue 中可以使用 Axios 的 onUploadProgress 回调来显示上传进度。

methods: {
  async uploadFile() {
    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'
        },
        onUploadProgress: (progressEvent) => {
          const percentCompleted = Math.round(
            (progressEvent.loaded * 100) / progressEvent.total
          )
          console.log('上传进度:', percentCompleted + '%')
        }
      })
      console.log('上传成功:', response.data)
    } catch (error) {
      console.error('上传失败:', error)
    }
  }
}

文件类型和大小验证

在前端和后端都应该验证文件类型和大小以确保安全性。

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

  if (!allowedTypes.includes(file.type)) {
    alert('不支持的文件类型')
    return
  }

  if (file.size > maxSize) {
    alert('文件大小超过限制')
    return
  }

  this.file = file
}

// 后端验证 (multer 配置)
const fileFilter = (req, file, cb) => {
  const allowedTypes = ['image/jpeg', 'image/png', 'application/pdf']
  if (!allowedTypes.includes(file.mimetype)) {
    return cb(new Error('不支持的文件类型'), false)
  }
  cb(null, true)
}

const upload = multer({
  storage,
  fileFilter,
  limits: {
    fileSize: 5 * 1024 * 1024 // 5MB
  }
})