首页 > 建站教程 > 前端框架 >  vue使用原生Web Worker正文

vue使用原生Web Worker

网上关于vue使用Web Worker http://www.5imoban.net/jiaocheng/CSS3_HTML5/2019/0618/3579.html,有相关的库,但是我爱模板网做的这个项目,并不需要处理多少Web Worker,于是直接用原生的来撸了。

1、在根目录public文件夹下新建worker.js,监听主线程传来的数据,处理完关闭:
self.addEventListener('message', function (e) {
    //接收主线程传来的数据
    const files = e.data;
    //循环,耗时操作
    const temp = []
    for (const i in files) {
      const curFile = {}
      if (!files[i].name || !files[i].webkitRelativePath) continue
      curFile.file = files[i] // 存储的源文件对象,用来上传
      curFile.name = files[i].name.substring(0, files[i].name.lastIndexOf('.'))
      curFile.webkitRelativePath = files[i].webkitRelativePath
      curFile.size = calcSize(files[i].size)
      curFile.type = files[i].name.split('.')[files[i].name.split('.').length - 1]
      curFile.lastModified = timeStamp2Date(files[i].lastModified)
      temp.push(curFile)
    }
    //将结果发给主线程
    self.postMessage(temp);
    //关闭
    self.close();
}, false);
2、在VUE的方法中写了下面的代码:
onPickDirectory(e) {
  const that = this;
  that.scaned = false
  const files = e.target.files
  //实例化worker,指定刚才的js
  var worker = new Worker('work.js');
  //向子线程发送数据
  worker.postMessage(files);
  //监听子线程返回数据
  worker.onmessage = function (event) {
      //接收数据
    that.fileList = event.data;
    //结束
    worker.terminate();
  }
},