vue+element+md5实现大文件分片上传、断点续传

在Vue项目中，结合Element UI和md5实现大文件分片上传和断点续传的功能，可以通过以下步骤实现：

1. 使用Element UI的<el-upload>组件来上传文件。
2. 使用md5库来计算文件的md5哈希值，用于检测文件是否已经上传过，从而实现断点续传。
3. 实现分片上传逻辑，将大文件分成多个小块，然后逐个上传。
4. 在服务端实现接收分片并重新组装文件的逻辑。

以下是一个简化的Vue组件示例，展示了如何实现文件分片上传：

<template>
  <el-upload
    :action="uploadUrl"
    :before-upload="handleBeforeUpload"
    :on-success="handleSuccess"
    :on-error="handleError"
    :auto-upload="false"
    ref="upload"
  >
    <el-button slot="trigger" size="small" type="primary">选择文件</el-button>
    <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
  </el-upload>
</template>
 
<script>
import md5 from 'js-md5';
 
export default {
  data() {
    return {
      uploadUrl: '/upload',
      chunkSize: 2 * 1024 * 1024, // 每个分片的大小，这里以2MB为例
    };
  },
  methods: {
    handleBeforeUpload(file) {
      // 计算文件的md5，用于断点续传
      const fileReader = new FileReader();
      fileReader.readAsArrayBuffer(file);
      fileReader.onload = (e) => {
        const hash = md5(e.target.result);
        console.log('File MD5:', hash);
        // 这里可以将md5值发送到服务器查询是否已上传过
      };
    },
    handleSuccess(response, file, fileList) {
      console.log('File uploaded successfully:', file);
    },
    handleError(err, file, fileList) {
      console.error('Error during upload:', err);
    },
    submitUpload() {
      this.$refs.upload.submit();
    },
  },
};
</script>

在服务端，你需要实现接收分片上传的逻辑，并在所有分片上传成功后重组文件。服务端需要处理分片的顺序、是否全传完以及如何合并文件等问题。

请注意，以上代码仅提供了基本框架，实际应用中需要根据具体的服务端实现细节进行调整。