Vue+Express实现大文件上传的基础功能

2023-09-25 00:42:18

使用 Vue 和 Express 实现大文件上传：分步指南

随着互联网的快速发展，对大文件上传的需求日益增加。从视频和图像到音乐和文档，我们经常需要处理超过传统浏览器限制的文件大小的文件。为了解决这一挑战，本文将分步指导您使用 Vue 和 Express 构建一个大文件上传解决方案。

构建前端上传界面

第一步是创建一个前端上传界面。这个界面应该包括一个文件选择器、一个上传按钮和一个进度条。在 Vue 中，您可以使用以下代码实现此界面：

<template>
  <div>
    <input type="file" @change="selectFile">
    <button @click="uploadFile">上传</button>
    <div v-if="progress > 0">
      进度：{{progress}}%
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      file: null,
      progress: 0
    }
  },
  methods: {
    selectFile(event) {
      this.file = event.target.files[0]
    },
    uploadFile() {
      const formData = new FormData()
      formData.append('file', this.file)

      axios.post('/upload', formData, {
        headers: {
          'Content-Type': 'multipart/form-data'
        },
        onUploadProgress: (progressEvent) => {
          this.progress = Math.round((progressEvent.loaded / progressEvent.total) * 100)
        }
      })
      .then(res => {
        console.log(res.data)
      })
      .catch(err => {
        console.log(err)
      })
    }
  }
}
</script>

处理大文件上传请求

构建前端界面后，我们需要处理大文件上传的请求。在 Express 中，我们可以使用以下代码实现此功能：

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

const app = express()

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

const upload = multer({ storage: storage })

app.post('/upload', upload.single('file'), (req, res, next) => {
  res.json({
    success: true,
    message: '文件上传成功'
  })
})

app.listen(3000, () => {
  console.log('服务器正在监听 3000 端口')
})

将文件存储在服务器上

处理上传请求后，我们需要将文件存储在服务器上。在 Express 中，我们可以使用以下代码实现此功能：

const fs = require('fs')

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

const upload = multer({ storage: storage })

app.post('/upload', upload.single('file'), (req, res, next) => {
  const file = req.file

  fs.readFile(file.path, (err, data) => {
    if (err) {
      res.json({
        success: false,
        message: '文件上传失败'
      })
    } else {
      fs.writeFile('./uploads/' + file.originalname, data, (err) => {
        if (err) {
          res.json({
            success: false,
            message: '文件上传失败'
          })
        } else {
          res.json({
            success: true,
            message: '文件上传成功'
          })
        }
      })
    }
  })
})