前端vue大文件切片上传

前端 Vue 大文件切片上传可以通过以下步骤实现：

1. 将大文件切成多个小文件，每个小文件大小一般为 1MB ~ 10MB 左右，可以使用 FileReader API 进行切片。

2. 使用 axios 等网络请求库将每个小文件上传到服务器，可以使用 Promise.all 等方式保证上传顺序和结果。

3. 在服务器端将所有小文件合并成一个完整的文件。可以使用 Node.js 等后端语言实现文件合并。

4. 可以添加断点续传、上传进度条等功能，提高用户体验。

以下是一个示例代码，供参考：

<template>
  <div>
    <input type="file" ref="fileInput" @change="selectFile" />
    <button @click="upload">上传</button>
    <div v-if="progress > 0">
      {{ Math.round(progress * 100) }}%
    </div>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  data() {
    return {
      file: null,
      progress: 0,
      chunkSize: 10 * 1024 * 1024, // 10MB
    }
  },
  methods: {
    selectFile(event) {
      this.file = event.target.files[0]
    },
    async upload() {
      if (!this.file) {
        return
      }

      const chunkCount = Math.ceil(this.file.size / this.chunkSize)

      for (let i = 0; i < chunkCount; i++) {
        const start = i * this.chunkSize
        const end = Math.min(start + this.chunkSize, this.file.size)
        const chunk = this.file.slice(start, end)
        const formData = new FormData()
        formData.append('file', chunk)
        formData.append('chunk', i)
        formData.append('chunks', chunkCount)

        await axios.post('/api/upload', formData, {
          onUploadProgress: (progressEvent) => {
            const loaded = progressEvent.loaded + start
            const total = this.file.size
            this.progress = loaded / total
          },
        })
      }

      await axios.post('/api/merge', { filename: this.file.name })

      this.progress = 0
    },
  },
}
</script>

注意：在服务器端合并文件时，需要根据上传的文件名和分片数进行合并。同时，需要注意文件上传的安全性，避免文件上传漏洞被攻击。