揭秘Vue.js + Node.js + MySQL构建B站多图上传功能的奥秘

2023-11-25 08:02:09

前端准备

1.1 项目初始化

首先，我们需要初始化一个Vue.js项目，可以使用Vue CLI工具，输入以下命令：

vue create b站多图上传

1.2 安装依赖

接下来，我们需要安装必要的依赖包，包括Node.js、Express.js、Multer和MySQL等，可以使用以下命令：

npm install nodejs express multer mysql

1.3 前端界面设计

接下来，我们需要设计前端界面，这里我们使用Element UI库来构建，以便快速搭建出美观实用的界面。

<template>
  <div class="container">
    <h1>多图上传</h1>
    <form @submit.prevent="onSubmit">
      <input type="file" multiple ref="input">
      <button type="submit">上传</button>
    </form>
  </div>
</template>

<script>
import { ref } from 'vue'
import axios from 'axios'

export default {
  setup() {
    const input = ref(null)

    const onSubmit = () => {
      const files = input.value.files
      const formData = new FormData()
      for (let i = 0; i < files.length; i++) {
        formData.append('files', files[i])
      }

      axios.post('/upload', formData, {
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      }).then(res => {
        console.log(res.data)
      })
    }

    return {
      input,
      onSubmit
    }
  }
}
</script>

2. 后端开发

2.1 路由设置

首先，我们需要在Node.js中设置路由，以便处理前端发送来的请求，可以使用Express.js框架来实现。

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

app.use(multer().array('files'))

app.post('/upload', (req, res) => {
  // 处理上传的文件
})

app.listen(3000)

2.2 数据库操作

接下来，我们需要连接MySQL数据库，并创建相应的表来存储上传的图片，可以使用MySQL原生驱动或Sequelize ORM框架来实现。

const mysql = require('mysql')

const connection = mysql.createConnection({
  host: 'localhost',
  user: 'root',
  password: 'password',
  database: 'b站多图上传'
})

connection.connect()

connection.query('CREATE TABLE IF NOT EXISTS images (id INT AUTO_INCREMENT, name VARCHAR(255), PRIMARY KEY (id))', (err, result) => {
  if (err) {
    console.error(err)
  } else {
    console.log('表格创建成功')
  }
})

2.3 文件上传处理

最后，我们需要处理上传的文件，包括保存文件、重命名文件、生成缩略图等，可以使用Multer库来实现。

const multer = require('multer')

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

const upload = multer({ storage })

3. RESTful API构建

接下来，我们需要构建RESTful API，以便前端和后端进行通信，可以使用Express.js框架来实现。

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

app.use(multer().array('files'))

app.post('/upload', (req, res) => {
  const files = req.files
  const connection = mysql.createConnection({
    host: 'localhost',
    user: 'root',
    password: 'password',
    database: 'b站多图上传'
  })

  connection.connect()

  for (let i = 0; i < files.length; i++) {
    const file = files[i]
    const sql = 'INSERT INTO images (name) VALUES (?)'
    connection.query(sql, [file.filename], (err, result) => {
      if (err) {
        console.error(err)
      } else {
        console.log('上传成功')
      }
    })
  }

  connection.end()

  res.json({
    code: 0,
    msg: '上传成功'
  })
})

app.listen(3000)