Vue + Node.js + MongoDB图片上传组件实现图片预览和删除功能详解

标题：Vue + Node.js + MongoDB图片上传组件实现图片预览和删除功能详解

介绍

本文将详细介绍如何使用Vue、Node.js和MongoDB实现一款图片上传组件，该组件可以实现图片预览和删除功能。本文包含两个示例，分别介绍使用全局注册和局部注册组件的实现方法。

示例一：全局注册组件

第一步：创建项目

创建一个Vue项目，使用Vue CLI工具进行创建。

vue create vue-image-upload

第二步：创建组件

在src/components目录下创建一个名为ImageUpload.vue的组件。该组件实现了图片上传和预览功能，代码如下：

第三步：创建Node.js后端

在项目根目录下创建一个名为server.js的文件，用于启动Node.js服务。代码如下：

const express = require('express')
const multer = require('multer')
const cors = require('cors')
const mongoose = require('mongoose')
const Image = require('./models/Image')

mongoose.connect('mongodb://localhost:27017/image_upload', {
  useNewUrlParser: true,
  useUnifiedTopology: true
})
  .then(() => console.log('Mongoose connected'))
  .catch(err => console.log(err))

const app = express()

app.use(cors())
app.use(express.static('public'))

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

const upload = multer({ storage }).single('image')

app.post('/images/upload', (req, res) => {
  upload(req, res, (err) => {
    if (err) {
      console.log(err)
      return res.sendStatus(500)
    }
    const image = new Image({
      url: `http://localhost:3000/uploads/${req.file.originalname}`
    })
    image.save()
      .then(() => res.json(image))
      .catch(err => {
        console.log(err)
        res.sendStatus(500)
      })
  })
})

app.delete('/images/delete/:id', (req, res) => {
  const id = req.params.id
  Image.findOneAndDelete({ _id: id })
    .then(() => res.sendStatus(200))
    .catch(() => res.sendStatus(500))
})

app.listen(3000, () => console.log('Server started'))

第四步：创建数据库schema

创建一个名为models/Image.js的文件，用于定义数据库的schema。代码如下：

const mongoose = require('mongoose')

const imageSchema = new mongoose.Schema({
  url: String
})

module.exports = mongoose.model('Image', imageSchema)

第五步：引入组件

在App.vue文件中引入组件，代码如下：

第六步：启动项目

使用以下命令，启动项目：

npm run serve (运行前端)
node server.js (运行后端)

第七步：测试

打开浏览器，访问http://localhost:8080。上传一张图片，可以看到图片已经成功上传并预览。点击删除图片按钮，图片成功删除。

示例二：局部注册组件

本示例与示例一相同，只是使用了局部注册组件的方法。

第一步：创建项目

同示例一。

第二步：创建组件

同示例一。

第三步：创建Node.js后端

同示例一。

第四步：创建数据库schema

同示例一。

第五步：引入组件

在App.vue文件中引入组件，代码如下：

第六步：启动项目

使用以下命令，启动项目：

npm run serve (运行前端)
node server.js (运行后端)

第七步：测试

同示例一。

总结

本文介绍了使用Vue、Node.js和MongoDB实现一款图片上传组件，该组件可以实现图片预览和删除功能。本文包含两个示例，分别介绍使用全局注册和局部注册组件的实现方法。该组件可以方便地应用于各种Vue项目中。