FilePond - 暂停上传直到方法执行完成

如何解决FilePond - 暂停上传直到方法执行完成

我在 NuxtJS 项目中使用 FilePond (https://github.com/pqina/filepond) 和 Vue-Adapter for Filepond (https://github.com/pqina/vue-filepond)。

我想减轻多次上传同一个文件的问题。为了实现这一点，我目前正在对 filepond 的 addfilestart 事件调用一个函数。被调用的函数采用提供的 File-Object 并从 1MB-Chunk-Slizes 构建一个哈希。

当这个函数正在执行并计算哈希文件时，文件池已经开始上传。

是否有可能通过以某种方式暂停并在我确定哈希值未知后恢复上传来阻止此上传。

我不喜欢的一种解决方法是暂时从 filepond 中删除文件，并在计算哈希值后重新添加它。

编辑：这是相关的代码。我删除了大部分内容，这不会影响这个问题（所以不要奇怪，为什么没有 server-config 等）

一旦文件被放入文件池，beforeUploadCheck 就会被调用。此函数通过调用 loading 递增地计算传递文件的哈希值。

loading 将每个 Partial-File-Chunk 作为 ArrayBuffer 同步读取，以确保生成的哈希不会因为某些块比其他块更快而搞砸。

我添加了两条评论，理想情况下我会暂停并继续上传。

<template>
  <FilePond
  ref="pond"
  name="file"
  chunk-uploads="true"
  :chunk-size="chunkSize"
  :chunk-force="true"
  :allow-multiple="true"
  @addfilestart="beforeUploadCheck"
  />
</template>

<script>
import CryptoJS from 'crypto-js/';
import vueFilePond from 'vue-filepond';
import 'filepond/dist/filepond.min.css';

const FilePond = vueFilePond(FilePondpluginFileValidateType);

export default {
  components: {
    FilePond,},computed: {
    chunkSize() {
      return this.$config.chunk_size_byte;
    },methods: {
    async beforeUploadCheck(payload) {
      // Preferebly somehow pause upload

      const { file } = payload;
      const { pond } = this.$refs;
      const SHA256 = CryptoJS.algo.SHA256.create();
      let counter = 0;

      const callbackProgress = (data) => {
          const wordBuffer = CryptoJS.lib.WordArray.create(data);
          SHA256.update(wordBuffer);
          counter += data.byteLength;
          console.log(`${((counter / file.size) * 100).toFixed(0)}%`);
      };
  
      const callbackFinal = (data) => {
          console.log('100%');
          const encrypted = SHA256.finalize().toString();
          console.log(`encrypted: ${encrypted}`);
          
          // Do something with hash & continue upload
      };

      this.loading(file,callbackProgress,callbackFinal);
    },async loading(file,callbackFinal) {
      const chunkSize = 1024 * 1024 * 10; // bytes
      let offset = 0;
      let partial;

      if (file.size === 0) {
        callbackFinal();
      }
      while (offset < file.size) {
        // [Offset,Offset+ChunkSize)
        partial = file.slice(offset,offset + chunkSize);
        // eslint-disable-next-line no-await-in-loop
        const partialBuffer = await partial.arrayBuffer();
        callbackProgress(partialBuffer);
        if (offset + chunkSize >= file.size) {
          callbackFinal();
        }
        offset += chunkSize;
      }
    },};
</script>