当前位置：首页 > VUE

vue node实现文件上传

2026-02-20 23:33:46VUE

实现文件上传的基本流程

前端使用Vue.js构建上传界面，后端使用Node.js（如Express框架）处理文件接收和存储。以下是具体实现方法：

前端Vue实现

创建文件上传组件，使用<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>

后端Node.js实现

使用Express框架和multer中间件处理文件上传：

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

const app = express()

// 配置存储
const storage = multer.diskStorage({
  destination: (req, file, cb) => {
    cb(null, 'uploads/') // 上传文件保存目录
  },
  filename: (req, file, cb) => {
    const uniqueSuffix = Date.now() + '-' + Math.round(Math.random() * 1E9)
    cb(null, file.fieldname + '-' + uniqueSuffix + path.extname(file.originalname))
  }
})

const upload = multer({ storage: 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')
})

文件大小限制和类型验证

前端可以添加基本验证：

// 在uploadFile方法中添加
if (this.selectedFile.size > 5 * 1024 * 1024) {
  alert('文件大小不能超过5MB')
  return
}

const allowedTypes = ['image/jpeg', 'image/png']
if (!allowedTypes.includes(this.selectedFile.type)) {
  alert('仅支持JPEG和PNG格式')
  return
}

后端使用multer的limits和fileFilter选项：

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

进度显示实现

前端可以添加上传进度显示：

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 + '%')
    // 可以更新UI显示进度
  }
})

安全性考虑

后端应添加安全措施：

vue node实现文件上传

// 防止目录遍历攻击
const sanitizeFilename = require('sanitize-filename')

// 在multer配置中使用
filename: (req, file, cb) => {
  const safeFilename = sanitizeFilename(file.originalname)
  cb(null, Date.now() + '-' + safeFilename)
}

这些方法组合起来可以构建一个完整的文件上传功能，从前端界面到后端处理，包括验证和进度显示等增强功能。