Vue3 携手 Nodejs，踏上文件上传之旅：揭秘图片上传内幕

2023-04-13 03:18:44

Vue3 与 Node.js：图片上传指南，从基础到精通

踏入图片上传的精彩世界！本文将引导你使用 Vue3 和 Node.js 构建一个完整的图片上传项目。从前端组件的奥秘到坚实后端服务的构建，我们将逐步揭开图片上传的幕后机制。

前端篇：Vue3 图片上传组件的魔力

图片选择：让用户选择图像

开启图片上传之旅的第一步是允许用户选择图像。可以使用 <input type="file"> 元素或 Vue3 提供的 <v-file-input> 组件来实现。只需将 v-model 绑定到 selectedFile 数据属性，即可将用户选择的图像存储在组件中。

图片上传：将图像发送到服务器

图片选择后，需要将其上传到服务器。可以使用 <form> 元素与 <input type="file"> 元素结合，或使用 Vue3 的 useFetch() 方法通过 AJAX 发送文件。创建一个 FormData 对象，将选定的文件附加到它，并使用 HTTP POST 请求将其发送到服务器。

进度显示：让用户了解上传状态

为了让用户了解图片上传进度，可以使用 Vue3 提供的 <v-progress-linear> 组件。通过绑定 indeterminate 属性来指示上传正在进行，并通过绑定 progress 属性来显示上传进度百分比。这将为用户提供直观的进度反馈。

后端篇：Node.js 构建坚实的上传服务

图片接收：在服务器上接收图像

在后端，需要在 Express.js 路由中添加一个接收图片的路由。使用 multer 中间件处理上传的文件，它将文件解析为可管理的对象。multer().single('file') 将处理名为 "file" 的单个文件上传。

图片存储：将图像保存到数据库或文件系统

接收图片后，需要将其存储到数据库或文件系统中。对于数据库存储，可以使用 MongoDB 或 MySQL 等数据库。对于文件系统存储，可以使用 fs 模块。根据您的项目要求选择最合适的存储方法。

响应客户端：向用户发送上传结果

图片存储后，向客户端发送响应以指示上传是否成功。可以在响应中包含有关上传的文件的信息，例如文件名、大小和存储位置。这将使前端能够向用户显示上传状态。

示例代码：将理论付诸实践

以下是展示前端和后端代码片段的示例：

前端代码（Vue3）：

<template>
  <v-file-input v-model="selectedFile"></v-file-input>
  <v-progress-linear :indeterminate="uploading" :progress="uploadProgress"></v-progress-linear>
</template>

<script>
import { useFetch } from 'vue-fetch'

export default {
  data() {
    return {
      selectedFile: null,
      uploading: false,
      uploadProgress: 0
    }
  },
  methods: {
    async upload() {
      this.uploading = true
      const formData = new FormData()
      formData.append('file', this.selectedFile)

      const response = await useFetch('/api/upload', {
        method: 'POST',
        body: formData,
        onProgress: e => {
          this.uploadProgress = Math.round(e.loaded / e.total * 100)
        }
      })
      this.uploading = false

      if (response.ok) {
        // 处理上传成功
      } else {
        // 处理上传失败
      }
    }
  }
}
</script>

后端代码（Node.js）：

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

const app = express()
app.use(multer().single('file'))

app.post('/api/upload', (req, res) => {
  // 处理上传的图像并将其存储到数据库或文件系统
  // ...

  res.send({ success: true })
})

app.listen(3000, () => {
  console.log('Server is listening on port 3000')
})