从零入门，使用 Vue 和 Node.js 构建图片上传下载 web 服务

2023-10-14 08:23:01

让我们开始吧！

第 1 步：安装必要的软件包

首先，您需要安装必要的软件包。您可以使用以下命令安装 Vue CLI、Node.js 和 MongoDB：

npm install -g @vue/cli
npm install -g node
brew install mongodb-community

第 2 步：创建一个新的 Vue 项目

使用以下命令创建一个新的 Vue 项目：

vue create image-upload-download

第 3 步：安装所需的 Node.js 软件包

在项目目录中，使用以下命令安装所需的 Node.js 软件包：

npm install koa koa-bodyparser multer mongodb

第 4 步：创建服务器

在项目目录中，创建一个名为 server.js 的文件，并添加以下代码：

const Koa = require('koa');
const app = new Koa();
const router = require('./routes');
const bodyParser = require('koa-bodyparser');
const multer = require('multer');

app.use(bodyParser());
app.use(router.routes());
app.use(router.allowedMethods());

app.listen(3000);

第 5 步：创建路由

在项目目录中，创建一个名为 routes.js 的文件，并添加以下代码：

const Router = require('@koa/router');
const router = new Router();
const multer = require('multer');
const upload = multer({ dest: 'uploads/' });
const fs = require('fs');
const MongoClient = require('mongodb').MongoClient;
const assert = require('assert');

// Connect to MongoDB
const mongoClient = new MongoClient('mongodb://localhost:27017', { useNewUrlParser: true, useUnifiedTopology: true });
mongoClient.connect(err => {
  assert.equal(null, err);
  const db = mongoClient.db('image-upload-download');

  // Define the routes
  router.post('/upload', upload.single('image'), async (ctx, next) => {
    const file = ctx.req.file;
    const filename = file.filename;
    const originalname = file.originalname;
    const mimetype = file.mimetype;
    const size = file.size;

    const image = { filename, originalname, mimetype, size };

    // Save the image to MongoDB
    await db.collection('images').insertOne(image);

    ctx.body = { success: true, message: 'Image uploaded successfully', image };
  });

  router.get('/download/:filename', async (ctx, next) => {
    const filename = ctx.params.filename;
    const image = await db.collection('images').findOne({ filename });

    if (!image) {
      ctx.status = 404;
      ctx.body = { success: false, message: 'Image not found' };
      return;
    }

    const filePath = `uploads/${filename}`;
    ctx.attachment(image.originalname);
    ctx.body = fs.createReadStream(filePath);
  });
});

module.exports = router;

第 6 步：运行服务器

在项目目录中，使用以下命令运行服务器：

npm run serve

第 7 步：测试服务

现在，您可以使用浏览器访问以下网址来测试服务：

http://localhost:3000/upload
http://localhost:3000/download/filename

您应该能够上传和下载图片。

第 8 步：添加前端代码

现在，您需要添加前端代码。您可以在 src 目录中创建一个名为 App.vue 的文件，并添加以下代码：

<template>
  <div>
    <h1>Image Upload and Download</h1>
    <form @submit.prevent="onSubmit">
      <input type="file" ref="image" />
      <button type="submit">Upload</button>
    </form>
    <br />
    <a v-if="image" :href="'/download/' + image.filename" download>{{ image.originalname }}</a>
  </div>
</template>

<script>
export default {
  data() {
    return {
      image: null
    };
  },
  methods: {
    onSubmit() {
      const file = this.$refs.image.files[0];
      const formData = new FormData();
      formData.append('image', file);

      axios.post('/upload', formData, {
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      }).then(response => {
        this.image = response.data.image;
      }).catch(error => {
        console.error(error);
      });
    }
  }
};
</script>