uniapp分片上传代码

当涉及到大文件上传时，UniApp提供了分片上传的解决方案。下面是一个简单的示例代码，演示了如何使用uniapp进行分片上传：

1. 在template中添加一个文件选择按钮和一个上传按钮：

<template>
  <div>
    <input type="file" ref="fileInput" @change="selectFile">
    <button @click="upload">上传</button>
  </div>
</template>

2. 在script中定义相关的方法：

<script>
export default {
  methods: {
    selectFile() {
      // 选择文件
      const file = this.$refs.fileInput.files[0];
      this.uploadFile(file);
    },
    uploadFile(file) {
      // 分片上传
      const chunkSize = 1024 * 1024; // 每个分片的大小，这里设置为1MB
      const totalChunks = Math.ceil(file.size / chunkSize); // 总分片数
      let currentChunk = 0; // 当前上传的分片索引

      const uploadChunk = () => {
        const start = currentChunk * chunkSize;
        const end = Math.min(start + chunkSize, file.size);
        const chunk = file.slice(start, end);

        // 发送分片数据到服务器进行上传
        // 这里使用axios作为示例，你可以根据自己的需求选择合适的网络请求库
        axios.post('/upload', chunk, {
          headers: {
            'Content-Type': 'application/octet-stream',
            'Content-Disposition': `attachment; filename="${file.name}"`,
            'X-Chunk-Index': currentChunk,
            'X-Total-Chunks': totalChunks
          }
        }).then(() => {
          currentChunk++;
          if (currentChunk < totalChunks) {
            uploadChunk(); // 递归上传下一个分片
          } else {
            console.log('上传完成');
          }
        }).catch(error => {
          console.error('上传失败', error);
        });
      };

      uploadChunk(); // 开始上传第一个分片
    },
    upload() {
      const file = this.$refs.fileInput.files[0];
      if (file) {
        this.uploadFile(file);
      } else {
        console.error('请选择文件');
      }
    }
  }
}
</script>

这段代码实现了分片上传的逻辑，每次上传一个分片数据到服务器，直到所有分片上传完成。