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

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

介绍

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

示例一：全局注册组件

第一步：创建项目

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

vue create vue-image-upload

第二步：创建组件

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

<template>
  <div>
    <input type="file" ref="fileInput" @change="onFileChange" style="display: none;">
    <button @click="upload">上传图片</button>
    <div>
      <img v-for="(image, index) in images" :src="image.url" :key="index" style="width: 200px;">
      <button @click="deleteImage(index)">删除图片</button>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  data() {
    return {
      images: []
    }
  },
  methods: {
    onFileChange() {
      let files = this.$refs.fileInput.files
      if (!files.length) {
        return
      }
      this.createImage(files)
    },
    createImage(files) {
      let formData = new FormData()
      formData.append('image', files[0])
      axios.post('http://localhost:3000/images/upload', formData, {
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      })
        .then(response => {
          console.log(response)
          this.images.push(response.data)
        })
        .catch(error => {
          console.log(error)
        })
    },
    deleteImage(index) {
      axios.delete(`http://localhost:3000/images/delete/${this.images[index]._id}`)
        .then(response => {
          console.log(response)
          this.images.splice(index, 1)
        })
        .catch(error => {
          console.log(error)
        })
    },
    upload() {
      this.$refs.fileInput.click()
    }
  }
}
</script>

<style scoped>

</style>

第三步：创建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文件中引入组件，代码如下：

<template>
  <div id="app">
    <ImageUpload />
  </div>
</template>

<script>
import ImageUpload from './components/ImageUpload.vue'

export default {
  name: 'app',
  components: {
    ImageUpload
  }
}
</script>

<style>
</style>

第六步：启动项目

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

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

第七步：测试

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

示例二：局部注册组件

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

第一步：创建项目

同示例一。

第二步：创建组件

同示例一。

第三步：创建Node.js后端

同示例一。

第四步：创建数据库schema

同示例一。

第五步：引入组件

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

<template>
  <div id="app">
    <image-upload />
  </div>
</template>

<script>
import ImageUpload from './components/ImageUpload.vue'

export default {
  name: 'app',
  components: {
    'image-upload': ImageUpload
  }
}
</script>

<style>
</style>

第六步：启动项目

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

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

第七步：测试

同示例一。

总结

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