大文件切片上传_文件上传切片大小多少合适-CSDN博客

本文链接：https://blog.csdn.net/qq_34400736/article/details/132303762

该博客聚焦前端文件上传功能，介绍了创建处理文件上传组件的方法，阐述了将文件切成小块上传的切片逻辑，提及使用特定库将切片上传到服务器，还说明了利用Element Plus组件添加进度条以显示上传进度。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

创建组件：创建一个组件用于处理文件上传，命名为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>

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

const startUpload = () => {
  if (!file.value) {
    ElMessage.error('请选择文件');
    return;
  }

  const chunkSize = 1024 * 1024; // 每个切片大小，这里设置为1MB
  const 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; // 每个切片大小，这里设置为1MB
  const 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; // 每个切片大小，这里设置为1MB
  const 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>