vue2+ThinkPHP5实现简单大文件切片上传
使用 Vue 2 和 ThinkPHP 5 实现大文件切片上传功能
文章目录
- 一、前端（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, // 每个切片的大小，这里设置为 2MBchunks: [], // 存放文件切片的数组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 =</