续上，element-ui

Element-UI是一个流行的开源前端组件库，它基于Vue.js框架构建，为开发者提供了丰富的预定义UI元素和组件，以便快速开发响应式、现代化的Web应用。Element UI的设计风格简洁、易用，涵盖了表格、表单、导航、按钮、布局、对话框等常见的界面组件，同时还支持国际化的多语言支持。

使用Element-UI的优点包括：

1. **易上手**：API设计直观，文档详尽，使得新手也能快速上手。
2. **模块化**：每个组件都是独立的，可以根据需要灵活选择和使用。
3. **响应式设计**：适配不同设备和屏幕尺寸，提供良好的移动端体验。
4. **样式统一**：内置了一套美观的CSS样式，有助于快速构建一致的UI风格。

相关问题

结合element-ui 的el-upload组件支持分片上传

Element-UI 的 el-upload 组件本身并不支持分片上传，但是我们可以通过使用第三方库来实现分片上传的功能。

一种常见的方案是使用 axios 库来进行文件上传，并在上传时使用 axios 的分片上传功能。axios 库已经内置了分片上传的支持，我们可以使用 axios 的 `axios.post` 方法来上传文件，并使用 `onUploadProgress` 方法来监听上传进度。

首先，我们需要在项目中安装 axios 和 element-ui：

npm install axios element-ui --save

然后，我们可以在组件中使用 el-upload 组件来上传文件，如下所示：

<template>
  <el-upload
    class="upload-demo"
    ref="upload"
    :action="uploadUrl"
    :headers="headers"
    :on-success="handleSuccess"
    :on-error="handleError"
    :on-progress="handleProgress"
    :file-list="fileList"
    :limit="limit"
    :multiple="multiple"
    :data="formData"
    :auto-upload="autoUpload"
    :show-file-list="showFileList"
  >
    <el-button size="small" type="primary">点击上传</el-button>
  </el-upload>
</template>

其中，我们需要设置 `action` 属性为文件上传的接口地址，同时需要设置 `on-success`、`on-error` 和 `on-progress` 等事件来处理上传成功、上传失败和上传进度。

接下来，我们可以在组件的 `mounted` 钩子函数中初始化 axios 并设置分片大小：

import axios from 'axios';

export default {
  name: 'UploadDemo',
  data() {
    return {
      fileList: [],
      uploadUrl: 'http://example.com/upload',
      limit: 3,
      multiple: true,
      formData: {},
      autoUpload: true,
      showFileList: true,
      headers: {},
      chunkSize: 5 * 1024 * 1024 // 5MB
    };
  },
  mounted() {
    axios.defaults.headers.post['Content-Type'] = 'multipart/form-data';
    axios.defaults.timeout = 60000; // 超时时间
    axios.defaults.retry = 3; // 重试次数
    axios.defaults.retryDelay = 1000; // 重试间隔

    // 设置分片大小
    axios.defaults.maxContentLength = this.chunkSize;
    axios.defaults.maxBodyLength = this.chunkSize;
  },
  methods: {
    // 上传文件
    handleUpload(file) {
      const formData = new FormData();
      formData.append('file', file);

      return axios.post(this.uploadUrl, formData, {
        headers: this.headers,
        onUploadProgress: progressEvent => {
          const percentCompleted = Math.round(
            (progressEvent.loaded * 100) / progressEvent.total
          );
          console.log(percentCompleted);
        }
      });
    },
    // 上传成功回调
    handleSuccess(response, file, fileList) {
      console.log('上传成功:', response);
    },
    // 上传失败回调
    handleError(error, file, fileList) {
      console.log('上传失败:', error);
    },
    // 上传进度回调
    handleProgress(event, file, fileList) {
      console.log('上传进度:', event.percent);
    }
  }
};

在 `handleUpload` 方法中，我们使用 axios 的 `post` 方法来上传文件，并设置了 `onUploadProgress` 方法来监听上传进度。在 `mounted` 钩子函数中，我们设置了 axios 的默认参数，包括超时时间、重试次数、重试间隔和分片大小等。

需要注意的是，由于 el-upload 组件不支持分片上传，因此我们需要手动控制上传的文件数量，以避免同时上传过多的文件导致服务器崩溃。我们可以通过设置 `limit` 属性来控制上传的文件数量，例如设置为 3 表示一次最多只能上传 3 个文件。

另外，如果需要支持断点续传，我们需要在上传文件时记录已上传的文件块数量和位置，并在下次上传时从上次的位置继续上传。这部分内容比较复杂，需要根据具体的需求来实现，这里不再赘述。

使用vue + element + axios +qs实现断点续传

断点续传是指在文件上传过程中，如果因为网络或其他原因导致上传中断，可以在中断的位置继续上传，而不需要重新上传整个文件。下面是使用 Vue + Element + Axios + qs 实现断点续传的步骤：

1. 安装 Element 和 Axios

npm install element-ui axios --save

2. 创建上传组件

在 Vue 的组件中，使用 Element 的上传组件和 Axios 进行文件上传。首先，我们需要在模板中添加一个上传组件：

<el-upload
  class="upload-demo"
  ref="upload"
  :action="uploadUrl"
  :data="uploadData"
  :file-list="fileList"
  :auto-upload="false"
  :on-success="handleSuccess"
  :on-error="handleError"
>
  <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
  <el-button size="small" type="success" @click="submitUpload">上传到服务器</el-button>
  <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
</el-upload>

其中，`uploadUrl` 是上传接口的地址，`uploadData` 是上传接口的参数，`fileList` 是上传的文件列表，`handleSuccess` 和 `handleError` 是上传成功和失败的回调函数。

3. 实现上传方法

在 Vue 的方法中，实现文件上传的方法：

submitUpload() {
  this.$refs.upload.submit();
},
handleSuccess(response, file, fileList) {
  // 处理上传成功的逻辑
},
handleError(err, file, fileList) {
  // 处理上传失败的逻辑
}

在 `submitUpload` 方法中，调用上传组件的 `submit` 方法进行文件上传。在 `handleSuccess` 方法中，处理上传成功的逻辑，包括显示上传成功的提示信息、更新文件列表等。在 `handleError` 方法中，处理上传失败的逻辑，包括显示上传失败的提示信息、更新文件列表等。

4. 实现断点续传

要实现断点续传，需要在上传组件中添加 `before-upload` 和 `on-progress` 事件，分别处理上传前和上传中的逻辑。在 `before-upload` 事件中，检查文件是否已经上传过，如果上传过，就设置上传的起点为上次上传结束的位置，否则上传整个文件。在 `on-progress` 事件中，更新上传进度。

<el-upload
  class="upload-demo"
  ref="upload"
  :action="uploadUrl"
  :data="uploadData"
  :file-list="fileList"
  :auto-upload="false"
  :before-upload="beforeUpload"
  :on-progress="onProgress"
  :on-success="handleSuccess"
  :on-error="handleError"
>

beforeUpload(file) {
  // 判断文件是否已经上传过
  if (localStorage.getItem(file.name)) {
    // 设置上传的起点为上次上传结束的位置
    this.uploadData.start = JSON.parse(localStorage.getItem(file.name)).end;
  } else {
    // 上传整个文件
    this.uploadData.start = 0;
  }
},
onProgress(event, file, fileList) {
  // 更新上传进度
  const progress = Math.round((event.loaded / event.total) * 100);
  this.$set(file, "progress", progress);
}

在 `before-upload` 事件中，使用 `localStorage` 存储文件上传结束位置，以便下次继续上传。在 `on-progress` 事件中，计算上传进度并更新文件列表中对应文件的进度。

5. 实现暂停上传和恢复上传

要实现暂停上传和恢复上传，可以在上传组件中添加两个按钮，分别用于暂停和恢复上传。在暂停上传时，保存上传进度并中止上传。在恢复上传时，从上次保存的上传进度开始上传。

<el-upload
  ...
>
  <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
  <el-button size="small" type="success" @click="submitUpload">上传到服务器</el-button>
  <el-button size="small" type="warning" v-show="!isUploading" @click="resumeUpload">恢复上传</el-button>
  <el-button size="small" type="danger" v-show="isUploading" @click="pauseUpload">暂停上传</el-button>
  <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
</el-upload>

data() {
  return {
    isUploading: false,
    uploadProgress: 0
  };
},
methods: {
  submitUpload() {
    this.$refs.upload.submit();
    this.isUploading = true;
  },
  pauseUpload() {
    this.$refs.upload.abort();
    this.isUploading = false;
  },
  resumeUpload() {
    this.$refs.upload.submit();
    this.isUploading = true;
  },
  beforeUpload(file) {
    ...
  },
  onProgress(event, file, fileList) {
    ...
    this.uploadProgress = progress;
    file.progress = progress;
  }
}

在 Vue 的数据中，添加 `isUploading` 和 `uploadProgress` 两个变量，分别表示上传状态和上传进度。在方法中，实现暂停上传和恢复上传的逻辑，使用 `isUploading` 变量控制按钮的显示。在 `before-upload` 和 `on-progress` 事件中，更新上传状态和上传进度。

6. 完整代码

<template>
  <div>
    <el-upload
      class="upload-demo"
      ref="upload"
      :action="uploadUrl"
      :data="uploadData"
      :file-list="fileList"
      :auto-upload="false"
      :before-upload="beforeUpload"
      :on-progress="onProgress"
      :on-success="handleSuccess"
      :on-error="handleError"
    >
      <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
      <el-button size="small" type="success" @click="submitUpload">上传到服务器</el-button>
      <el-button size="small" type="warning" v-show="!isUploading" @click="resumeUpload">恢复上传</el-button>
      <el-button size="small" type="danger" v-show="isUploading" @click="pauseUpload">暂停上传</el-button>
      <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
    </el-upload>
  </div>
</template>

<script>
import { Upload, Button } from "element-ui";
import axios from "axios";
import qs from "qs";

export default {
  name: "UploadComponent",
  components: {
    "el-upload": Upload,
    "el-button": Button
  },
  data() {
    return {
      isUploading: false,
      uploadProgress: 0,
      uploadUrl: "/upload",
      uploadData: {
        start: 0
      },
      fileList: []
    };
  },
  methods: {
    submitUpload() {
      this.$refs.upload.submit();
      this.isUploading = true;
    },
    pauseUpload() {
      this.$refs.upload.abort();
      this.isUploading = false;
    },
    resumeUpload() {
      this.$refs.upload.submit();
      this.isUploading = true;
    },
    beforeUpload(file) {
      if (localStorage.getItem(file.name)) {
        this.uploadData.start = JSON.parse(localStorage.getItem(file.name)).end;
      } else {
        this.uploadData.start = 0;
      }
    },
    onProgress(event, file, fileList) {
      const progress = Math.round((event.loaded / event.total) * 100);
      this.uploadProgress = progress;
      file.progress = progress;
      localStorage.setItem(
        file.name,
        JSON.stringify({
          end: this.uploadData.start + event.loaded
        })
      );
    },
    handleSuccess(response, file, fileList) {
      this.fileList = fileList;
      this.isUploading = false;
      localStorage.removeItem(file.name);
      this.$message({
        message: "上传成功",
        type: "success"
      });
    },
    handleError(err, file, fileList) {
      this.fileList = fileList;
      this.isUploading = false;
      this.$message.error("上传失败");
    }
  }
};
</script>