vue2+ThinkPHP5实现简单大文件切片上传

使用 Vue 2 和 ThinkPHP 5 实现大文件切片上传功能

一、前端（Vue 2）

安装依赖

安装spark-md5依赖 用于生成文件哈希，以便验证文件的完整性。

npm install spark-md5

文件上传并切片全部代码

<template>
  <div>
    <!-- 文件输入元素，用于选择文件 -->
    <input type="file" @change="handleFileChange" />
    <!-- 上传按钮，点击后调用 uploadChunks 方法 -->
    <button @click="uploadChunks">上传</button>
  </div>
</template>

<script>
// 导入 SparkMD5 库，用于生成文件哈希
import SparkMD5 from 'spark-md5';

export default {
     
  data() {
     
    return {
     
      file: null, // 选中的文件
      chunkSize: 2 * 1024 * 1024, // 每个切片的大小，这里设置为 2MB
      chunks: [], // 存放文件切片的数组
      hash: '' // 文件的哈希值，用于验证文件的完整性
    };
  },
  methods: {
     
    // 处理文件选择事件
    handleFileChange(event) {
     
      this.file = event.target.files[0]; // 获取选中的第一个文件
      this.prepareChunks(); // 准备文件切片
    },
    // 准备文件切片
    prepareChunks() {
     
      const totalSize = this.file.size; // 文件的总大小
      let start = 0; // 切片的起始位置

      // 循环切割文件，直到处理完整个文件
      while (start < totalSize) {
     
        const end = Math.min(start + this.chunkSize, totalSize); // 确定切片的结束位置
        const chunk =</