node+vue实现文件上传功能

下面我将为您详细讲解“node+vue实现文件上传功能”的完整攻略。

技术实现方案

实现文件上传功能需要前后端协同完成，一般采用以下技术方案：

• 前端：Vue + element-ui
• 后端：Node.js + Express
• 存储：阿里云 OSS 或者本地文件系统

前端实现

准备工作

1.在项目中引入 element-ui 和 axios

npm install element-ui axios -S

2.在项目中引入 Vue 和 element-ui 的样式

import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)

HTML 代码

<template>
  <div class="upload">
    <el-upload
      class="upload"
      action="/api/upload"
      :on-success="handleSuccess"
      :on-error="handleError"
      :with-credentials="true"
      :show-file-list="false"
      :before-upload="beforeUpload"
    >
      <el-button type="primary">上传文件</el-button>
    </el-upload>
  </div>
</template>

JS 代码

<script>
import axios from 'axios'

export default {
  data() {
    return {}
  },
  methods: {
    beforeUpload(file) {
      this.loading = true
      const isJPG = file.type === 'image/jpeg'
      const isPNG = file.type === 'image/png'
      const isPDF = file.type === 'application/pdf'
      if (!isJPG && !isPNG && !isPDF) {
        this.$message.error('上传文件格式只能为 JPG/PNG/PDF 格式')
        return false
      }
    },
    handleSuccess(response, file, fileList) {
      console.log(response)
      this.$message({
        message: '上传成功',
        type: 'success'
      })
    },
    handleError(error, file, fileList) {
      this.$message({
        message: '上传失败，请重试',
        type: 'error'
      })
    }
  }
}
</script>

说明

• 在 template 中，我们使用了 element-ui 的 upload 组件，设置了上传接口、上传成功和失败的回调函数、上传前的校验以及按钮文字。
• 在 script 中，我们使用了 axios 发送请求，实现了上传文件的功能。beforeUpload 方法实现了文件格式的校验，handleSuccess 和 handleError 方法分别用于处理上传文件成功和失败的情况。

后端实现

准备工作

1.通过 npm 安装依赖包 express、multer 和 fs

npm install express multer fs

2.在 app.js 中添加上传文件的路由

const express = require('express')
const app = express()
const multer = require('multer')
const fs = require('fs')
const upload = multer({ dest: 'temp/' }) // 上传文件临时存储目录

app.post('/api/upload', upload.single('file'), function(req, res) {
  // 获取文件信息
  const file = req.file
  // 获取文件类型
  const fileType = file.mimetype.split('/')[1]
  // 获取文件名称
  const fileName = file.originalname.split('.')[0] + '-' + Date.now() + '.' + fileType
  // 获取文件路径
  const filePath = `./uploads/${fileName}`
  // 读取文件流
  var readable = fs.createReadStream(file.path)
  // 写入文件流
  var writable = fs.createWriteStream(filePath)
  readable.pipe(writable)
  res.send({
    code: 200,
    msg: '上传成功',
    data: {
      fileName: fileName,
      url: `http://localhost:${port}/uploads/${fileName}` // 访问文件地址
    }
  })
})

说明

• 在后端代码中，我们使用了 express 的中间件 multer，实现了上传文件的功能。
• 通过 fs 模块读取上传的文件流，然后将其写入到指定目录下，最后返回上传结果。

示例说明

下面是两个文件上传示例：

示例一：上传图片

上传图片需要使用 JPG 或 PNG 格式的图片。

前端代码：

<template>
  <div class="upload">
    <el-upload
      class="upload"
      action="/api/upload"
      :on-success="handleSuccess"
      :on-error="handleError"
      :with-credentials="true"
      :show-file-list="false"
      :before-upload="beforeUpload"
    >
      <el-button type="primary">上传图片</el-button>
    </el-upload>
  </div>
</template>

后端代码：

app.post('/api/upload', upload.single('file'), function(req, res) {
  // 获取文件信息
  const file = req.file
  // 获取文件类型
  const fileType = file.mimetype.split('/')[1]
  // 获取文件名称
  const fileName = file.originalname.split('.')[0] + '-' + Date.now() + '.' + fileType
  // 获取文件路径
  const filePath = `./uploads/${fileName}`
  // 读取文件流
  var readable = fs.createReadStream(file.path)
  // 写入文件流
  var writable = fs.createWriteStream(filePath)
  readable.pipe(writable)
  res.send({
    code: 200,
    msg: '上传成功',
    data: {
      fileName: fileName,
      url: `http://localhost:${port}/uploads/${fileName}` // 访问文件地址
    }
  })
})

示例二：上传 PDF 文件

上传 PDF 文件需要使用 PDF 格式的文件。

前端代码：

<template>
  <div class="upload">
    <el-upload
      class="upload"
      action="/api/upload"
      :on-success="handleSuccess"
      :on-error="handleError"
      :with-credentials="true"
      :show-file-list="false"
      :before-upload="beforeUpload"
    >
      <el-button type="primary">上传 PDF 文件</el-button>
    </el-upload>
  </div>
</template>

后端代码：

app.post('/api/upload', upload.single('file'), function(req, res) {
  // 获取文件信息
  const file = req.file
  // 获取文件类型
  const fileType = file.mimetype.split('/')[1]
  // 获取文件名称
  const fileName = file.originalname.split('.')[0] + '-' + Date.now() + '.' + fileType
  // 获取文件路径
  const filePath = `./uploads/${fileName}`
  // 读取文件流
  var readable = fs.createReadStream(file.path)
  // 写入文件流
  var writable = fs.createWriteStream(filePath)
  readable.pipe(writable)
  res.send({
    code: 200,
    msg: '上传成功',
    data: {
      fileName: fileName,
      url: `http://localhost:${port}/uploads/${fileName}` // 访问文件地址
    }
  })
})

以上就是实现文件上传功能的完整攻略，希望对您有所帮助。