vue当前行文件上传分片上传功能怎么做

实现分片上传功能，可以按照以下步骤进行：

1. 将文件切分为多个分片，每个分片大小一般为 1M-10M 左右，可以根据实际情况进行调整。

2. 发送每个分片到后端，后端将每个分片存储在临时文件夹中。

3. 当所有分片上传完成后，后端将所有临时文件合并成一个完整的文件。

4. 前端可以通过监听上传进度，显示上传进度条等信息。

下面是一个简单的示例代码：

<template>
  <div>
    <input type="file" @change="uploadFile">
    <progress v-if="showProgress" :value="progress" max="100"></progress>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showProgress: false,
      progress: 0,
    }
  },
  methods: {
    async uploadFile(event) {
      const file = event.target.files[0]
      const chunkSize = 1024 * 1024 // 每个分片的大小，这里设置为 1M
      const totalChunks = Math.ceil(file.size / chunkSize) // 总共需要上传的分片数
      const chunkList = [] // 存储所有分片的数组
      for (let i = 0; i < totalChunks; i++) {
        const start = i * chunkSize
        const end = Math.min(start + chunkSize, file.size)
        const blob = file.slice(start, end) // 切分文件
        chunkList.push(blob)
      }
      this.showProgress = true
      let uploadedChunks = 0 // 已经上传的分片数
      for (let i = 0; i < totalChunks; i++) {
        const formData = new FormData()
        formData.append('chunk', chunkList[i])
        formData.append('filename', file.name)
        formData.append('totalChunks', totalChunks)
        formData.append('chunkIndex', i)
        // 发送分片到后端
        await axios.post('/upload/chunk', formData)
        uploadedChunks++
        this.progress = Math.round((uploadedChunks / totalChunks) * 100) // 更新上传进度
      }
      // 合并所有分片
      await axios.post('/upload/merge', { filename: file.name, totalChunks })
      this.showProgress = false
      this.progress = 0
    },
  },
}
</script>

在上面的代码中，我们将文件切分为多个分片，然后通过循环发送每个分片到后端，更新上传进度条，最后调用合并接口将所有分片合并成一个完整的文件。在实际应用中，还需要考虑文件上传失败、断点续传等情况，并进行相应的处理。