Question

我试图使用vue-worker将处理选定输入文件的任务卸载到base64到后台线程。但是我没有成功。这是我正在尝试的：

 // file is selected file from input
 const getBase64 = (file) => {
   return new Promise((resolve, reject) => {
     const reader = new FileReader()
     reader.readAsDataURL(file)
     reader.onload = () => resolve(reader.result)
     reader.onerror = error => reject(error)
   })
 }

this.$worker.run((file, getBase64) => {

  getBase64(file).then((data) => {
     return data
  })

}, [file, getBase64])
.then(result => {
  console.log(result)
})
.catch(e => {
  console.error(e)
})

但是我遇到以下错误：

DOMException：无法在“ Worker”上执行“ postMessage”：功能 getBase64（file）{返回新的Promise（函数（解析，拒绝）{ var reader = new FileReader（）; ......}无法克隆。

此错误与＆到底有什么关系？我正在尝试实现什么？

Answer 1

我还没有使用vue-worker，所以这不是确切的答案，但我希望它仍然可以在某种程度上为您提供帮助。

我正在这样使用worker-loader：

辅助脚本-calc.worker.js

import regress from '@/lib/regression'

// Setup an event listener that will handle messages sent to the worker.
self.addEventListener('message', function(e)
{
  if(e.data && e.data.cmd) switch(e.data.cmd)
  {
    case 1: // regression of combined data
      setTimeout(function()
      {
        combined(e.data);
      },20);
      break;
    case 2: // regressions of individual campaigns
      setTimeout(function()
      {
        individual(e.data);
      },20);
      break;
  }
}, false);

function combined(data)
{
  do_regress(data.regression,data.param,data.outliers);
  self.postMessage(data);
}

function individual(data)
{
  let i;
  for(i=0;i<data.param.length;i++) 
    do_regress(data.regression,data.param[i],data.outliers);
  self.postMessage(data);
}

如何使用*.vue组件中的辅助脚本

<script>
import CalcWorker from '@/calc.worker.js'

export default
{
  data()
  {
    return {
      worker: new CalcWorker(),
      individual: 0,
      kind: 1,
      regression: [],
      outliers: []
    }
  },
  created()
  {
    // Setup an event listener that will handle messages received from the worker.
    this.worker.addEventListener('message', this.worker_ready, false);
    this.update();
  },
  beforeDestroy: function()
  {
    this.worker.terminate();
  },
  methods:
  {
    update()
    {
      this.worker.postMessage(
      {
        cmd: 2,
        param: this.individual,
        kind: this.kind,
        regression: this.regression,
        outliers: this.outliers
      });
    },
    worker_ready(e)
    {
      switch(e.data.cmd)
      {
        case 1:
          ......
          break;
        case 2:
          ......
          break;
      }
    }
  }
}
</script>

使用Vue.Js在Web Workers中正确触发功能

1 个答案: