使用vue-simple- uploader时候进度条不正确

Question

使用这个插件的时候，分片已经全部上传了 已经显示上传成功了，但是还没调合并的接口 就显示100%了 如何修改这个问题

Answer 1

引自免费微信小程序：皆我百晓生

在使用vue-simple-uploader这个插件时，你遇到的问题是进度条在所有分片上传成功但尚未调用合并接口之前就显示为100%。这是因为该插件默认在所有分片上传完毕后即认为上传完成。

要解决这个问题，你需要自定义uploader的上传进度计算方式，并且在调用完合并接口后再更新为100%。这里提供一种可能的解决方案：

// 引入 uploader
import SimpleUploader from 'vue-simple-uploader';

// 定义一个扩展过的 uploader 组件
const CustomUploader = {
  extends: SimpleUploader,
  data() {
    return {
      mergeCompleted: false, // 新增状态标志位，用于记录是否已调用并完成合并接口
    };
  },
  methods: {
    onUploadProgress(file, percentage) {
      // 仅当未调用合并接口或已经调用且完成时才更新进度条
      if (!this.mergeCompleted || (this.mergeCompleted && this.isAllChunksUploaded(file))) {
        super.onUploadProgress(file, percentage);
      }
    },
    async onChunkUploaded(chunkFile, response) {
      // 所有分片上传完成后
      if (this.isAllChunksUploaded(chunkFile.file)) {
        // 在此处模拟调用合并接口（请替换为实际的API调用）
        const mergeResult = await this.$api.mergeChunks(chunkFile.file.id); 

        // 合并接口调用成功后设置mergeCompleted为true
        if (mergeResult.success) {
          this.mergeCompleted = true;
          // 更新文件上传进度为100%
          this.onUploadProgress(chunkFile.file, 100);
        }
      }
    },
  },
};

// 在你的组件中注册并使用自定义的uploader
export default {
  components: {
    'custom-uploader': CustomUploader,
  },
};

请注意，上述代码片段中this.$api.mergeChunks(chunkFile.file.id)是一个假设的API调用，你需要根据实际情况替换为你的后端服务提供的合并分片接口。

通过这种方式，你可以确保在合并操作真正完成之后，进度条才会正确地显示为100%。