秒传大文件，让前端后端不再抓狂！

前端

2023-01-04 15:05:07

大文件上传的终极指南：分块上传、断点续传、超时重试

在现代网络开发中，文件上传是一项不可或缺的功能。从上传照片和视频到提交重要文档，文件上传已成为我们日常工作流程的重要组成部分。然而，当涉及到处理大文件时，事情往往变得复杂起来。

处理大文件上传的挑战

上传大文件带来了一系列独特的挑战：

漫长的上传时间： 大文件需要更长时间才能上传，这可能导致用户界面冻结或响应缓慢。
网络不稳定： 互联网连接的不稳定可能会导致传输中断，从而导致上传失败。
内存消耗： 一次性处理大文件会消耗大量服务器内存，导致性能问题。

分块上传：大文件上传的解决方案

为了克服这些挑战，业界引入了分块上传技术。分块上传将大文件分解成较小的块，然后逐块上传。这带来了以下好处：

减少上传时间： 将文件分成更小的块可以并行上传，从而显著缩短上传时间。
提高稳定性： 如果其中一个块的上传失败，只有该块需要重新上传，而不是整个文件。
降低内存消耗： 通过一次只处理一个小块，可以显着减少服务器内存消耗。

前端实现：Vue3+TS+Vite

使用Vue3+TS+Vite前端框架，我们可以轻松实现分块上传功能。Vue3-file-upload库提供了以下功能：

分块上传： 自动将文件分成小块并逐块上传。
断点续传： 如果上传中断，它会自动从断点处继续上传。
超时重试： 如果块上传超时，它会自动重试。

以下代码示例演示了如何使用Vue3-file-upload库实现分块上传：

<template>
  <FileUpload
    :action="uploadUrl"
    :headers="headers"
    :multiple="true"
    :accept="accept"
    :maxSize="maxSize"
    @success="onSuccess"
    @error="onError"
    @progress="onProgress"
  />
</template>

<script>
import FileUpload from 'vue3-file-upload'

export default {
  components: { FileUpload },
  data() {
    return {
      uploadUrl: '/upload',
      headers: { 'Content-Type': 'multipart/form-data' },
      multiple: true,
      accept: '.jpg,.png,.pdf',
      maxSize: 1024 * 1024 * 100, // 100MB
    }
  },
  methods: {
    onSuccess(res) {
      console.log('上传成功', res)
    },
    onError(err) {
      console.log('上传失败', err)
    },
    onProgress(progressEvent) {
      console.log('上传进度', progressEvent)
    },
  },
}
</script>

后端实现：Node.js+Express

在Node.js+Express后端框架中，可以使用multer库来处理分块上传：

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

app.post('/upload', upload.any(), (req, res) => {
  res.send({
    code: 0,
    msg: '上传成功',
    data: req.files
  })
})