vue3+vite+ts+element plus实现大文件上传在Vue 3、Vite、TypeScript和Eleme

在Vue 3、Vite、TypeScript和Element Plus的组合下实现大文件上传，通常有以下几个步骤：前端文件选择、分片上传（如果文件非常大）和与后端的交互。我们将通过Element Plus的<el-upload>组件实现文件选择、上传，并通过axios或者fetch来处理上传的请求。

步骤一：安装依赖

1.安装Element Plus

npm install element-plus

2.安装axios（可选，使用axios来进行请求）

npm install axios

步骤二：配置`el-upload`组件

在Vue中使用Element Plus的el-upload组件来处理文件上传。

1. 创建上传组件

  <el-upload
    :action="uploadUrl"
    :headers="headers"
    :on-change="handleChange"
    :on-success="handleSuccess"
    :on-error="handleError"
    :before-upload="beforeUpload"
    :data="uploadData"
    accept="image/*, .pdf, .zip, .tar, .gz"
    :limit="1"
    :auto-upload="false"
    :file-list="fileList"
    :on-exceed="handleExceed"
  >
    <el-button slot="trigger" size="small" type="primary">点击上传</el-button>
    <el-button slot="upload" size="small" type="success">开始上传</el-button>
  </el-upload>
</template>

<script lang="ts">
    import { defineComponent, ref } from 'vue';
    import { ElUpload, ElButton } from 'element-plus';
    import axios from 'axios';

    const fileList = ref<any[]>([]);
    const uploadUrl = '/upload'; // 后端上传接口地址
    const headers = ref({
      Authorization: `Bearer ${localStorage.getItem('token')}`, // 如有身份验证令牌
    });
    const uploadData = ref({});

    // 上传前的检查，比如文件大小限制
    const beforeUpload = (file: File) => {
      if (file.size > 10 * 1024 * 1024) {  // 10MB 限制
        ElMessage.error('文件大小不能超过10MB');
        return false;
      }
      return true;
    };

    // 上传成功回调
    const handleSuccess = (response: any, file: any) => {
      console.log('上传成功', response, file);
    };

    // 上传失败回调
    const handleError = (err: any, file: any) => {
      console.log('上传失败', err, file);
    };

    // 文件变化时的回调
    const handleChange = (file: any, fileList: any) => {
      fileList.value = fileList;
    };

    // 超出文件数量时的回调
    const handleExceed = (files: any, fileList: any) => {
      ElMessage.warning('不能上传超过一个文件');
    };
</script>

<style scoped>
/* 可添加自定义样式 */
</style>

步骤三：分片上传（可选，针对大文件）

对于大文件上传，通常会使用分片上传的方式。Element Plus的el-upload支持分片上传，但需要配置。可以使用before-upload钩子处理文件的分片，利用后台支持的分片接口进行上传。示例代码：分片上传

let currentChunk = 0;

const beforeUpload = async (file: File) => {
  const totalChunks = Math.ceil(file.size / chunkSize);
  const chunk = file.slice(currentChunk * chunkSize, (currentChunk + 1) * chunkSize);
  const formData = new FormData();
  formData.append('file', chunk);
  formData.append('fileName', file.name);
  formData.append('chunk', currentChunk);
  formData.append('totalChunks', totalChunks);
  
  try {
    const response = await axios.post(uploadUrl, formData, {
      headers: { 'Content-Type': 'multipart/form-data' },
    });
    currentChunk++;
    if (currentChunk >= totalChunks) {
      console.log('上传完成');
    }
  } catch (error) {
    console.error('上传失败', error);
  }
  return false; // 阻止Element Plus的默认上传行为
};

步骤四：后端处理

你需要在后端配置接口来处理分片上传，常见的后端技术如Node.js（Express），Java（Spring），Python（Django，Flask）都可以进行处理。一般步骤如下：

接收文件分片：每个分片可以通过HTTP请求上传到服务器。
合并文件分片：所有分片上传完毕后，合并成原始文件。
保存文件：将文件保存到磁盘或云存储中。

结束语

这个方案提供了一个基础的前端实现，支持大文件上传和分片上传。你可以根据自己的需求对上传过程进行优化和定制。后端需要支持分片合并和文件存储。

vue3+vite+ts+element plus实现大文件上传