手把手教你搭建Vue+Node.js文件上传系统

2023-10-19 21:10:31

前言

随着互联网的快速发展，人们对文件共享的需求日益增长。文件上传功能已成为许多网站和应用程序的必备功能。本文将介绍如何使用Vue和Node.js构建一个完整的文件上传系统，涵盖前端界面的设计、后端文件存储、安全性和性能优化等各个方面。

前端界面设计

首先，我们需要设计前端界面。这里我们将使用Vue框架和element-UI组件库。

<template>
  <el-upload
    action="http://localhost:3000/upload"
    on-success="handleSuccess"
    on-error="handleError"
  >
    <el-button>上传文件</el-button>
  </el-upload>
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {
    const fileList = ref([])

    const handleSuccess = (response) => {
      fileList.value = response.data
    }

    const handleError = (error) => {
      console.log(error)
    }

    return {
      fileList,
      handleSuccess,
      handleError,
    }
  },
}
</script>

这段代码定义了一个Vue组件，其中包含了一个el-upload组件。该组件允许用户选择并上传文件。当文件上传成功后，handleSuccess方法将被调用。当文件上传失败时，handleError方法将被调用。

后端文件存储

接下来，我们需要在Node.js后端实现文件存储功能。这里我们将使用express框架和multer中间件。

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

const app = express()

const storage = multer.diskStorage({
  destination: './uploads/',
  filename: (req, file, cb) => {
    cb(null, Date.now() + '-' + file.originalname)
  },
})

const upload = multer({ storage })

app.post('/upload', upload.single('file'), (req, res) => {
  res.json({
    success: true,
    data: req.file,
  })
})

app.listen(3000)