大文件切片上传

1. 创建组件：创建一个组件用于处理文件上传，命名为Upload.vue。

   <template><div><input type="file" @change="handleFileChange" /><button @click="startUpload">开始上传</button></div>
   </template><script setup lang="ts">
   import { ref } from 'vue';
   import { ElMessage } from 'element-plus';const file = ref<File | null>(null);const handleFileChange = (event: Event) => {const target = event.target as HTMLInputElement;if (target.files?.length) {file.value = target.files[0];}
   };const startUpload = () => {if (!file.value) {ElMessage.error('请选择文件');return;}// 在这里编写文件切片上传逻辑
   };
   </script>
   

2. 添加切片逻辑：在startUpload方法中，我们需要将选择的文件切成多个小块进行上传。可以使用FileReader进行文件切片操作。

const startUpload = () => {if (!file.value) {ElMessage.error('请选择文件');return;}const chunkSize = 1024 * 1024; // 每个切片大小，这里设置为1MBconst totalChunks = Math.ceil(file.value.size / chunkSize); // 总切片数for (let i = 0; i < totalChunks; i++) {const start = i * chunkSize;const end = Math.min(start + chunkSize, file.value.size);const chunk = file.value.slice(start, end);// 在这里将切片上传到服务器}
};

3.切片上传到服务器：可以使用axios库进行文件上传操作。

import axios from 'axios';const startUpload = async () => {if (!file.value) {ElMessage.error('请选择文件');return;}const chunkSize = 1024 * 1024; // 每个切片大小，这里设置为1MBconst totalChunks = Math.ceil(file.value.size / chunkSize); // 总切片数for (let i = 0; i < totalChunks; i++) {const start = i * chunkSize;const end = Math.min(start + chunkSize, file.value.size);const chunk = file.value.slice(start, end);const formData = new FormData();formData.append('chunk', chunk);try {await axios.post('/upload', formData);// 上传成功的处理逻辑} catch (error) {// 上传失败的处理逻辑}}
};

4.添加进度条：可以使用Element Plus的ElProgress组件显示上传进度。

<template><div><input type="file" @change="handleFileChange" /><el-progress v-if="progressVisible" :percentage="uploadPercentage" /><button @click="startUpload">开始上传</button></div>
</template><script setup lang="ts">
import { ref, reactive } from 'vue';
import axios from 'axios';
import { ElMessage, ElProgress } from 'element-plus';const file = ref<File | null>(null);
const progress = reactive({visible: false,percentage: 0,
});const handleFileChange = (event: Event) => {const target = event.target as HTMLInputElement;if (target.files?.length) {file.value = target.files[0];}
};const startUpload = async () => {if (!file.value) {ElMessage.error('请选择文件');return;}const chunkSize = 1024 * 1024; // 每个切片大小，这里设置为1MBconst totalChunks = Math.ceil(file.value.size / chunkSize); // 总切片数progress.visible = true;progress.percentage = 0;for (let i = 0; i < totalChunks; i++) {const start = i * chunkSize;const end = Math.min(start + chunkSize, file.value.size);const chunk = file.value.slice(start, end);const formData = new FormData();formData.append('chunk', chunk);try {await axios.post('/upload', formData, {onUploadProgress: (progressEvent: ProgressEvent) => {const percentage = Math.round((progressEvent.loaded / progressEvent.total) * 100);progress.percentage = percentage;},});// 上传成功的处理逻辑} catch (error) {// 上传失败的处理逻辑}}progress.visible = false;
};
</script>