vue+ element + axios + qs实现断点续传

断点续传是指在文件上传过程中，如果上传中断，可以从上传中断的地方开始继续上传，避免重新上传整个文件。在使用 Vue、Element、Axios 和 Qs 实现断点续传时，可以按照以下步骤进行操作：

1. 前端页面部分

在前端页面中，可以使用 Element 组件库来实现上传文件的功能。例如可以使用 el-upload 组件来上传文件，代码如下：

<template>
  <el-upload
    class="upload-demo"
    action="yourUploadUrl"
    :auto-upload="false"
    :on-change="handleChange"
    :data="uploadData"
    :file-list="fileList"
    :http-request="uploadFile"
  >
    <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
    <el-button size="small" type="success" :disabled="!fileList.length" @click="submitUpload">上传到服务器</el-button>
    <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
  </el-upload>
</template>

在模板中，el-upload 组件的属性值中，我们需要设置以下内容：

- `action` 属性：设置上传文件的地址。
- `auto-upload` 属性：设置是否自动上传。
- `on-change` 属性：设置文件上传状态改变时的回调函数。
- `data` 属性：设置上传文件时需要携带的参数。
- `file-list` 属性：设置已经上传的文件列表。
- `http-request` 属性：设置文件上传的函数，我们在这里定义上传文件的逻辑。

接下来，我们需要在 data 函数中定义 fileList 和 uploadData 对象，代码如下：

data() {
  return {
    fileList: [],
    uploadData: {
      chunkSize: 1024 * 1024,  // 文件切片大小
      chunks: 0,  // 切片总数
      chunkIndex: 0,  // 当前切片编号
      fileSize: 0,  // 文件大小
      fileName: '',  // 文件名
      fileMd5: '',  // 文件md5值
      uploadUrl: '',  // 上传接口地址
    },
  }
},

在这里，我们需要定义上传文件时需要携带的参数。其中，chunkSize 表示每个切片的大小，chunks 表示总共需要切片的数量，chunkIndex 表示当前上传的切片编号，fileSize 表示文件的大小，fileName 表示文件的名称，fileMd5 表示文件的 md5 值，uploadUrl 表示上传接口的地址。

然后，我们需要在 methods 函数中定义 handleChange、uploadFile 和 submitUpload 函数。其中，handleChange 函数用来监听文件上传状态的改变，uploadFile 函数用来上传文件，submitUpload 函数用来提交上传请求。代码如下：

methods: {
  handleChange(file) {
    this.fileList = [file]
    this.uploadData.fileSize = file.size
    this.uploadData.fileName = file.name
    this.uploadData.fileMd5 = 'md5'
    this.uploadData.uploadUrl = 'uploadUrl'
    this.uploadData.chunks = Math.ceil(file.size / this.uploadData.chunkSize)
  },

  async uploadFile(file) {
    const index = this.uploadData.chunkIndex++
    const startByte = index * this.uploadData.chunkSize
    const endByte = Math.min((index + 1) * this.uploadData.chunkSize, this.uploadData.fileSize)
    const chunkFile = file.slice(startByte, endByte)

    const formData = new FormData()
    formData.append('file', chunkFile)
    formData.append('chunkIndex', index)
    formData.append('fileName', this.uploadData.fileName)
    formData.append('fileMd5', this.uploadData.fileMd5)

    const { data } = await this.$axios.post(this.uploadData.uploadUrl, formData, {
      headers: {
        'Content-Type': 'multipart/form-data'
      }
    })

    if (index === this.uploadData.chunks - 1) {
      console.log('upload success')
    } else {
      this.uploadFile(file)
    }
  },

  async submitUpload() {
    if (!this.fileList.length) return

    this.uploadData.chunkIndex = 0

    await this.uploadFile(this.fileList[0].raw)
  }
},

在这里，handleChange 函数将上传文件的基本信息保存到 uploadData 对象中，uploadFile 函数用来上传文件，submitUpload 函数用来提交上传请求。其中，uploadFile 函数是核心部分，它通过循环上传每个切片，如果上传成功，则继续上传下一个切片，否则重新上传当前切片。

2. 后端接口部分

在后端接口中，需要实现文件上传的逻辑。由于是断点续传，所以需要实现上传切片、合并切片的功能。例如可以使用 Node.js 和 Express 框架来实现上传文件的功能，代码如下：

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

const app = express()

app.use(express.static('public'))

app.post('/upload', multer({ dest: 'uploads/' }).single('file'), (req, res) => {
  const { fileName, fileMd5, chunkIndex } = req.body
  const chunkFile = req.file

  const chunkDir = path.join(__dirname, `./uploads/${fileMd5}`)
  const filePath = path.join(chunkDir, `${fileName}-${chunkIndex}`)

  if (!fs.existsSync(chunkDir)) {
    fs.mkdirSync(chunkDir)
  }

  fs.renameSync(chunkFile.path, filePath)

  res.json({
    code: 0,
    message: '上传成功',
  })
})

app.post('/merge', (req, res) => {
  const { fileName, fileMd5, chunks } = req.body

  const chunkDir = path.join(__dirname, `./uploads/${fileMd5}`)
  const filePath = path.join(chunkDir, fileName)

  const chunkPaths = []

  for (let i = 0; i < chunks; i++) {
    chunkPaths.push(path.join(chunkDir, `${fileName}-${i}`))
  }

  let ws = fs.createWriteStream(filePath)

  chunkPaths.forEach((chunkPath) => {
    let rs = fs.createReadStream(chunkPath)
    rs.on('end', () => {
      fs.unlinkSync(chunkPath)
    })
    rs.pipe(ws, { end: false })
  })

  ws.on('close', () => {
    fs.rmdirSync(chunkDir)
    res.json({
      code: 0,
      message: '上传成功',
    })
  })
})

app.listen(3000, () => {
  console.log('server is running at http://localhost:3000')
})

在这里，我们实现了两个接口，一个是上传切片的接口 `/upload`，一个是合并切片的接口 `/merge`。其中，上传切片的接口会将上传的切片保存到指定的目录下，并返回上传成功的消息；合并切片的接口会将上传的所有切片合并成一个完整的文件，并删除上传的切片。注意，在合并切片的过程中，需要使用 fs.createWriteStream 和 fs.createReadStream 将切片合并成一个完整的文件。

以上就是使用 Vue、Element、Axios 和 Qs 实现文件上传的断点续传的完整流程。