vue大文件切片上传、并发上传、断点续传与后端的逻辑（express 、nestJs）

Vue大文件分片上传可以通过将大文件进行切片，实现并发上传和断点续传，从而提高上传速度和用户体验。

1. 图方便直接原生，上传表单

<template>
  <form enctype="multipart/form-data">
    <input type="file" ref="fileInput" @change="onFileChange" />
    <button @click.prevent="upload">上传</button>
  </form>
</template>

2. 实现上传功能，主要包括文件切片、分片上传和断点续传

<script>
export default {
  methods: {
    onFileChange() {
      // 将大文件切片
      const file = this.$refs.fileInput.files[0]
      const maxChunkSize = 10 * 1024 * 1024 // 分片大小
      const chunks = Math.ceil(file.size / maxChunkSize)
      const chunkList = []
      for (let i = 0; i < chunks; i++) {
        const start = i * maxChunkSize
        const end = Math.min((i + 1) * maxChunkSize, file.size)
        chunkList.push(file.slice(start, end))
      }

      // 并发上传所有分片
      const promises = chunkList.map((chunk, index) => {
        const formData = new FormData()
        formData.append('index', index)
        formData.append('chunk', chunk)
        return this.uploadChunk(formData)
      })

      // 等待所有分片上传完成后进行合并
      Promise.all(promises).then(() => {
        this.mergeChunks(file.name, chunks)
      })
    },
    async uploadChunk(formData) {
      try {
        await this.$axios.post('/uploadChunk', formData)
      } catch (error) {
        console.log('分片上传失败:', error)
        throw error
      }
    },
    async mergeChunks(filename, chunks) {
      try {
        await this.$axios.post('/mergeChunks', { filename, chunks })
        console.log('上传成功！')
      } catch (error) {
        console.log('合并分片失败:', error)
        throw error
      }
    },
  },
}
</script>

3. 后端用的是 express 实现的分片上传接口和分片合并接口，主要包括对文件进行切片、上传分片到服务器和将上传完成的分片进行合并

const express = require('express')
const app = express()
const fs = require('fs')
const path = require('path')
const bodyParser = require('body-parser')

app.use(bodyParser.json())
app.use(bodyParser.urlencoded({ extended: true }))

// 实现分片上传接口
app.post('/uploadChunk', (req, res) => {
  const index = req.body.index
  const chunk = req.body.chunk
  const dir = path.join(__dirname, 'temp')
  if (!fs.existsSync(dir)) {
    fs.mkdirSync(dir)
  }
  const tempFilePath = path.join(dir, index.toString())
  fs.writeFileSync(tempFilePath, chunk)
  res.status(200).send('分片上传成功！')
})

// 实现分片合并接口
app.post('/mergeChunks', (req, res) => {
  const filename = req.body.filename
  const chunks = parseInt(req.body.chunks)
  const dir = path.join(__dirname, 'temp')
  const filePath = path.join(__dirname, 'uploads', filename)

  // 根据分片序号读取对应文件，并将所有分片写入一个新的文件中
  const writeStream = fs.createWriteStream(filePath)
  for (let i = 0; i < chunks; i++) {
    const readStream = fs.createReadStream(path.join(dir, i.toString()))
    readStream.pipe(writeStream, { end: false })
    readStream.on('end', () => {
      fs.unlinkSync(path.join(dir, i.toString()))
    })
  }
  writeStream.on('close', () => {
    res.status(200).send('分片合并成功！')
  })
})

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

另外，我为了练手也用nestjs实现了一下大文件上传的后端逻辑

1. 安装以下依赖

npm install --save @nestjs/core @nestjs/platform-express body-parser cors express fs-extra

2. 然后在 app.module.ts 中配置依赖和中间件

import { Module, MiddlewareConsumer, RequestMethod } from '@nestjs/common';
import { AppController } from './app.controller';
import { AppService } from './app.service';
import { MulterModule } from '@nestjs/platform-express';
import * as path from 'path';
import * as bodyParser from 'body-parser';
import * as cors from 'cors';
import * as express from 'express';
import * as fsExtra from 'fs-extra';

@Module({
  imports: [
    MulterModule.register({
      dest: path.join(__dirname, '..', 'uploads'),
    }),
  ],
  controllers: [AppController],
  providers: [AppService],
})
export class AppModule {
  configure(consumer: MiddlewareConsumer) {
    consumer
      .apply(bodyParser.json(), bodyParser.urlencoded({ extended: true }), cors())
      .forRoutes('*');
    // 静态文件中间件
    const uploadPath = path.join(__dirname, '..', 'uploads');
    const tempPath = path.join(__dirname, '..', 'temp');
    const staticResourceMiddleware = express.static(uploadPath);
    const tempResourceMiddleware = express.static(tempPath);
    consumer
      .apply(staticResourceMiddleware)
      .forRoutes({ path: 'uploads/*', method: RequestMethod.GET });
    consumer
      .apply(tempResourceMiddleware)
      .forRoutes({ path: 'temp/*', method: RequestMethod.GET });
  }
}

3. 上面的代码中我引入了 MulterModule、path、body-parser、cors、express 和 fs-extra 等依赖，并使用 configure 方法在 NestJS 应用中配置了中间件。

接着，在 app.service.ts 文件中，实现上传和合并文件的业务逻辑

import { Injectable } from '@nestjs/common';
import * as path from 'path';
import * as fsExtra from 'fs-extra';

@Injectable()
export class AppService {
  async uploadFileChunk(file: any, body: any) {
    const index = body.index;
    const dir = path.join(__dirname, '..', 'temp');
    if (!fsExtra.existsSync(dir)) {
      fsExtra.mkdirSync(dir);
    }
    const tempFilePath = path.join(dir, index.toString());
    await fsExtra.writeFile(tempFilePath, file.buffer);

    return '分片上传成功！';
  }

  async mergeFile(filename: string, chunks: number) {
    const dir = path.join(__dirname, '..', 'temp');
    const writeStream = fsExtra.createWriteStream(path.join(__dirname, '..', 'uploads', filename));
    for (let i = 0; i < chunks; i++) {
      try {
        const readStream = fsExtra.createReadStream(path.join(dir, i.toString()));
        await new Promise((resolve, reject) => {
          readStream.pipe(writeStream, { end: false });
          readStream.on('end', async () => {
            await fsExtra.unlink(path.join(dir, i.toString()));
            resolve();
          });
          readStream.on('error', reject);
        });
      } catch (error) {
        console.log('合并分片失败:', error);
        throw error;
      }
    }
    return '上传成功！';
  }
}

4. 我将上传和合并文件的逻辑分别封装在了 uploadFileChunk 和 mergeFile 方法中。

最后，在 app.controller.ts 中实现控制器逻辑，调用 AppService 中的方法

import { Controller, Post, UploadedFile, UseInterceptors, Body } from '@nestjs/common';
import { FileInterceptor } from '@nestjs/platform-express';
import { AppService } from './app.service';

@Controller()
export class AppController {
  constructor(private readonly appService: AppService) {}

  @Post('upload')
  @UseInterceptors(FileInterceptor('file'))
  async upload(@UploadedFile() file, @Body() body) {
    return this.appService.uploadFileChunk(file, body);
  }

  @Post('merge')
  async merge(@Body() body) {
    const filename = body.filename;
    const chunks = parseInt(body.chunks);
    return this.appService.mergeFile(filename, chunks);
  }
}