Vue+elementui普通上传和大文件分片上传

Vue+elementui的普通上传可以使用elementui中的el-upload组件，具体步骤如下：

1. 在Vue组件中引入el-upload组件。

<template>
  <el-upload
    action="https://www.example.com/upload"
    :headers="{Authorization: 'Bearer ' + token}"
    :data="{id: fileId}"
    :on-success="handleSuccess"
    :on-error="handleError"
    :on-progress="handleProgress">
    <el-button>点击上传</el-button>
  </el-upload>
</template>

<script>
import {ElUpload, ElButton} from 'element-ui';

export default {
  components: {ElUpload, ElButton},
  data() {
    return {
      token: 'your_token',
      fileId: 'your_file_id'
    };
  },
  methods: {
    handleSuccess(response, file, fileList) {
      console.log(response);
    },
    handleError(error, file, fileList) {
      console.log(error);
    },
    handleProgress(event, file, fileList) {
      console.log(event);
    }
  }
};
</script>

2. 在el-upload组件中设置上传的地址、请求头、上传数据、上传成功回调、上传失败回调和上传进度回调等参数。

3. 在上传成功回调函数中处理上传成功后的逻辑。

大文件分片上传可以使用如下步骤：

1. 前端将大文件分为若干个片段，并将每个片段上传到后端。

2. 后端将每个片段存储在服务器上，并返回每个片段的文件名和存储路径。

3. 前端将每个片段的文件名和存储路径组成一个数组，发送给后端。

4. 后端将数组中的每个片段按照顺序合并成一个完整的文件。

5. 前端可以在上传过程中显示上传进度，并支持暂停、恢复和取消上传。可以使用Vue+elementui+axios实现大文件分片上传。