Vue项目中大文件切片上传实现秒传、断点续传的详细实现教程_vue切片上传

4. 错误重试

由于网络等原因，上传可能会失败。为了避免上传失败，我们需要对上传过程进行错误处理和重试。我们可以设置一个最大重试次数，在上传失败后进行重试，直到达到最大重试次数为止。

5. 控制并发

由于上传需要占用带宽和服务器资源，同时上传多个文件或多个块可能会引起带宽和服务器资源紧张。因此，我们需要限制同时上传的文件数和块数，防止过度占用带宽和服务器资源。

三、代码示例

以下是一个基于Vue框架，使用axios库和element-ui组件库实现切片上传的示例代码：

<template>
  <div>
    <!--上传组件-->
    <el-upload
      class="upload-demo"
      :action="uploadUrl"  // 上传地址
      :auto-upload="false"  // 禁用自动上传
      :on-change="handleChange"  // 文件选择时触发
      :before-upload="handleBeforeUpload"  // 文件上传前触发
      :on-progress="handleProgress"  // 上传进度变化时触发
    >
      <el-button slot="trigger">选取文件</el-button>  // 选择文件按钮
      <!--上传文件按钮-->
      <el-button style="margin-left: 10px" type="primary" :loading="uploading" :disabled="files.length === 0" @click="handleUpload">
        上传文件
      </el-button>
      <div class="clearfix"></div>
      <el-progress :percentage="percent"></el-progress>  // 上传进度条
    </el-upload>
  </div>
</template>

<script>
import axios from 'axios';
import { ElMessage } from 'element-ui';  // 引入Element UI库中的消息提示组件

export default {
  data() {
    return {
      files: [],  // 选中的文件列表
      uploading: false,  // 是否正在上传
      percent: 0,  // 上传进度
      uploadUrl: 'https://your.upload.url'  // 上传地址
    };
  },
  methods: {
    // 切片上传
    async upload(file) {
      const chunkSize = 1024 * 1024; // 每个块的大小为 1MB
      const fileSize = file.size;  // 文件大小
      const chunks = Math.ceil(fileSize / chunkSize);  // 总块数
      const tasks = [];  // 上传任务数组
      let uploaded = 0;  // 已上传块数

      // 文件切割
      for (let i = 0; i < chunks; i++) {
        const start = i * chunkSize;
        const end = Math.min(start + chunkSize, fileSize);

        tasks.push(
          new Promise((resolve, reject) => {
            const formData = new FormData();
            formData.append('chunk_index', i);  // 块编号
            formData.append('chunk_count', chunks);  // 总块数
            formData.append('file_id', file.id);  // 文件ID
            formData.append('chunk_data', file.slice(start, end));  // 块数据

            axios
              .post(this.uploadUrl, formData)  // 上传块数据
              .then(res => {
                uploaded++;
                this.percent = Math.floor((uploaded / chunks) * 100);
                resolve();
              })
              .catch(err => {
                reject(err);
              });
          })
        );
      }

      // 待所有块上传完成后，发送合并请求
      await Promise.all(tasks);
      const res = await axios.post(this.uploadUrl, { file_id: file.id, chunks });

      // 上传成功，返回文件URL
      if (res.status === 200) {
        return `${this.uploadUrl}/${file.id}`;
      } else {
        throw new Error(res.data.message);
      }
    },
    handleChange(files) {
      this.files = files;
    },
    async handleUpload() {
      try {
        this.uploading = true;
        for (let i = 0; i < this.files.length; i++) {
          const file = this.files[i];
          const url = await this.upload(file);
          // 文件上传成功，将url展示给用户 
          ElMessage.success(`文件${file.name}上传成功！URL：${url}`);
        }


## Vue 面试题

1.Vue 双向绑定原理
2.描述下 vue 从初始化页面–修改数据–刷新页面 UI 的过程？
3.你是如何理解 Vue 的响应式系统的?
4.虚拟 DOM 实现原理
5.既然 Vue 通过数据劫持可以精准探测数据变化,为什么还需要虚拟 DOM 进行 diff 检测差异?
6.Vue 中 key 值的作用？
7.Vue 的生命周期
8.Vue 组件间通信有哪些方式?
9.watch、methods 和 computed 的区别?
10.vue 中怎么重置 data?
11.组件中写 name 选项有什么作用？
12.vue-router 有哪些钩子函数?
13.route 和 router 的区别是什么？
14.说一下 Vue 和 React 的认识，做一个简单的对比
15.Vue 的 nextTick 的原理是什么？
16.Vuex 有哪几种属性?
17.vue 首屏加载优化
18.Vue 3.0 有没有过了解？
19.vue-cli 替我们做了哪些工作？
![](https://img-blog.csdnimg.cn/img_convert/0b9cd5c73dcf40c3fe007263a8adc813.webp?x-oss-process=image/format,png)

e 的 nextTick 的原理是什么？
16.Vuex 有哪几种属性?
17.vue 首屏加载优化
18.Vue 3.0 有没有过了解？
19.vue-cli 替我们做了哪些工作？
[外链图片转存中...(img-dFXqBttK-1714384446050)]

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/topics/618166371)**