前后端分离实现大文件切片上传代码实现

前端代码：

1. HTML部分：

<input type="file" id="file" multiple>
<button onclick="upload()">上传</button>

2. JavaScript部分：

function upload() {
  const fileInput = document.getElementById('file')
  const files = fileInput.files
  const chunkSize = 1024 * 1024 // 每个切片的大小（1MB）
  const totalChunks = Math.ceil(files[0].size / chunkSize) // 总共需要切片的数量
  let currentChunk = 0 // 当前上传的切片序号

  while (currentChunk < totalChunks) {
    const start = currentChunk * chunkSize // 当前切片在文件中的起始位置
    const end = Math.min(files[0].size, start + chunkSize) // 当前切片在文件中的结束位置（最后一片可能会小于chunkSize）

    const chunk = files[0].slice(start, end) // 切片文件对象
    const formData = new FormData() // 创建表单数据对象
    formData.append('file', chunk, `${files[0].name}.part${currentChunk}`) // 将切片文件添加到表单数据中，并且指定切片文件名

    // 发送切片文件请求到后端
    fetch('/upload', {
      method: 'POST',
      body: formData
    }).then(res => {
      console.log(res)
    }).catch(err => {
      console.error(err)
    })

    currentChunk++
  }
}

后端代码：

const express = require('express')
const app = express()
const fs = require('fs')
const path = require('path')
const multiparty = require('multiparty')

app.post('/upload', (req, res) => {
  const form = new multiparty.Form()
  form.parse(req, (err, fields, files) => {
    if (err) {
      console.error(err)
      return
    }

    const chunk = files.file[0]
    const fileName = chunk.originalFilename.split('.part')[0] // 获取文件名
    const chunkIndex = parseInt(chunk.originalFilename.split('.part')[1]) // 获取切片序号

    const uploadDir = path.join(__dirname, 'uploads', fileName)
    if (!fs.existsSync(uploadDir)) {
      fs.mkdirSync(uploadDir)
    }

    const chunkPath = path.join(uploadDir, chunk.originalFilename)
    fs.writeFileSync(chunkPath, fs.readFileSync(chunk.path))

    res.status(200).send('OK')
  })
})

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

以上代码实现了大文件的切片上传，前端将文件进行切片，发送多个请求到后端，后端将每个切片存储在服务器上，最后再将所有切片合并为完整文件。实际上，切片上传只是大文件上传的一部分，还需要实现切片的合并和文件的校验等操作，但是这些内容超出了本文的讨论范围。