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

Question

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

Answer 1

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

在使用vue-simple-uploader时，你遇到的问题是进度条显示100%但实际上所有分片尚未合并。要解决这个问题，你需要确保上传组件的进度更新逻辑与你的后端实际处理进度相匹配。

通常，这个插件的进度是基于每个分片上传完成的情况来计算的。如果你想要在所有分片合并完成后才显示为100%，那么需要自定义进度更新逻辑，并且在成功调用合并接口后触发进度到100%。

以下是一个可能的解决方案：

<template>
  <vue-simple-uploader 
    ref="uploader"
    @file-success="onFileSuccess"
    @upload-progress="onUploadProgress"
  ></vue-simple-uploader>
</template>

<script>
import VueSimpleUploader from 'vue-simple-uploader';

export default {
  components: {
    VueSimpleUploader,
  },
  data() {
    return {
      mergeComplete: false,
      // 假设我们有一个记录所有分片上传状态的数组
      chunkStatusList: [],
    };
  },
  methods: {
    async onFileSuccess(file) {
      // 分片上传成功后的回调
      // 这里模拟调用合并接口
      const isMergeSuccessful = await this.callMergeApi(file);
      if (isMergeSuccessful) {
        this.mergeComplete = true;
        // 更新进度条到100%
        this.$refs.uploader.updateFileProgress(file.id, 100);
      }
    },
    
    onUploadProgress(chunk, file, progressEvent) {
      // 分片上传进度更新回调
      let currentProgress = Math.round(progressEvent.loaded / progressEvent.total * 100);
      
      // 如果还没有开始合并操作，则按照当前分片的上传进度更新
      if (!this.mergeComplete) {
        this.$refs.uploader.updateFileProgress(file.id, currentProgress);
      }
    },

    async callMergeApi(file) {
      // 模拟调用合并接口并返回结果
      // 实际情况下，请替换为你的后端API调用代码
      // ...
      return true; // 返回合并成功的布尔值
    },
  },
};
</script>

请注意，上述代码是一个简化的示例，实际应用中请根据实际情况调整和补充API调用、分片状态管理等细节。通过这种方式，你可以确保在真正完成文件上传（包括分片上传和合并）之后，进度条才会正确地显示为100%。