ztwcom/loadModel/dbUtils.js

优化

const DB_NAME = 'modeldb'; //数据库名称
const DB_VERSION = 1; //数据库版本号
const DB_STORE_NAME = 'model_glb_table'; //数据库仓库

function DBUtil () {
  this.db = null;
  // 根据模型的url地址，请求模型
  // 如果没有数据库中没有模型，则请求模型并放入缓存中，返回promise，带有模型的blob文件对象
  // 如果如果缓存中有模型了，就直接从缓存中取出
  this.get = async (url, onProgress) => {
    this.db = await this.initDataBase(); // 打开数据库
    let getRequest = this.db // 保存数据
      .transaction([DB_STORE_NAME], "readwrite") // 事务对象 指定表格名称和操作模式（"只读"或"读写"）
      .objectStore(DB_STORE_NAME) // 仓库对象
      .get(url);  // 通过主键（url）获取数据
    let that = this;
    return new Promise((resolve, reject) => {
      getRequest.onsuccess = function (event) {
        let modelFile = event.target.result;
        // 假如已经有缓存了 直接用缓存
        if (modelFile) {
          if (onProgress) {
            onProgress(100);
          }
          // console.log("使用缓存");
          resolve(modelFile.blob)
        } else {
          // 假如没有缓存 请求新的模型存入
          that.put(url, onProgress).then((blob) => {
            resolve(blob)
          }).catch(() => {
            reject()
          });
        }
      };
      getRequest.onerror = function (event) {
        // console.log('error', event)
        reject()
      }
    })
  }

  // 请求模型并放入缓存中
  this.put = async (url, onProgress) => {
    const response = await fetch(url);
    if (response.status !== 200) {
      throw new Error('Request failed');
    }

    const contentLength = response.headers.get('Content-Length');
    // console.log(contentLength)
    const totalBytes = parseInt(contentLength, 10);
    let downloadedBytes = 0;

    const readableStream = response.body;

    const { readable, writable } = new TransformStream();

    const writer = writable.getWriter();

    const reader = readableStream.getReader();

    const pump = async () => {
      const { done, value } = await reader.read();
      if (done) {
        writer.close();
        return;
      }

      writer.write(value);

      downloadedBytes += value.length;

      if (onProgress) {
        const progress = (downloadedBytes / totalBytes) * 100;
        console.log(onProgress, progress.toFixed(2))
        onProgress(progress.toFixed(2));
      }

      return pump();
    };

    await pump();
    let obj = {
      ssn: url
    }
    // if ((url.indexOf('png') != -1) || (url.indexOf('jpg') != -1)) {
    //   await imageURLToBase64(url).then(res => {
    //     obj.blob = this.base64ToBlob(res)
    //     // console.log(obj, 'obj')
    //   })
    // } else {

    let blob = null;
    try {
      blob = await new Response(readable).arrayBuffer();
    } catch (e) {
      console.log('请求arrayBuffer失败,用blob方式')
      blob = await new Response(readable).blob();
    }
    obj.blob = new Blob([blob])

    // }
    const inputRequest = this.db
      .transaction([DB_STORE_NAME], "readwrite")
      .objectStore(DB_STORE_NAME)
      .add(obj);

    return new Promise((resolve, reject) => {
      inputRequest.onsuccess = function () {
        console.log('glb数据添加成功');
        resolve(obj.blob);
      };
      inputRequest.onerror = function (evt) {
        console.log('glb数据添加失败', evt);
        reject();
      };
    });
  }
  // function imageURLToBase64 (url) {
  //   return fetch(url)
  //     .then(response => response.blob())
  //     .then(blob => new Promise((resolve, reject) => {
  //       const reader = new FileReader();
  //       reader.onloadend = () => resolve(reader.result);
  //       reader.onerror = reject;
  //       reader.readAsDataURL(blob);
  //     }));
  // }
  // this.base64ToBlob = (dataurl) => {
  //   let arr = dataurl.split(',')
  //   let mime = arr[0].match(/:(.*?);/)[1]
  //   let bstr = atob(arr[1])
  //   let n = bstr.length
  //   let u8arr = new Uint8Array(n)
  //   while (n--) {
  //     u8arr[n] = bstr.charCodeAt(n)
  //   }
  //   return new Blob([u8arr], { type: mime })
  // },
  // 打开数据库
  this.initDataBase = () => {
    if (!window.indexedDB) {
      console.log("浏览器不支持indexedDB缓存!!!")
      return;
    }
    let request = indexedDB.open(DB_NAME, DB_VERSION); //如果没有数据库，则创建，有数据库就链接
    return new Promise((resolve, reject) => {
      request.onerror = function () {
        // console.log("error: create db error");
        reject()
      };
      // 数据库创建或升级的时候会触发
      request.onupgradeneeded = function (evt) {
        evt.currentTarget.result.createObjectStore(
          DB_STORE_NAME, { keyPath: 'ssn' });
      };
      // 数据库打开成功回调
      request.onsuccess = function (evt) {
        // console.log("onsuccess: create db success ");
        resolve(evt.target.result)
      };
    })
  }
}
export default DBUtil