Blob-Typen können nicht in IndexedDB auf Safari gespeichert werden

Question

Ich habe Probleme mit dem Speichern von Blobs in IndexedDB in Safari Version 10.1.2 (auch mit dem gleichen Problem auf IOS).

Ich benutze die eckige2-indexeddb Modul Wrapper, aber ich denke nicht, dass es ein Problem mit dem Modul als solches ist. Mein Code funktioniert in Chrome gut, aber bei dem Versuch, einen Blob-Objekt in der Safari IndexedDB zu setzen, wird der Datensatz zeigt immer als ‚null‘ (siehe Filedata Feld):

Ich habe versucht, eine Vielzahl von verschiedenen Blob-Dateien (Audio, Video, HTML) und sie werden immer als 'Null' angezeigt. Beim Einfügen dieses Datensatzes werden keine (sichtbaren) Fehler von IndexedDb zurückgegeben.

Von dem, was ich gelesen habe - Blobs sollten in Safari unterstützt werden. Ich denke, dass das Problem damit verbunden sein könnte, wie der Blob erstellt wird? vielleicht mag Safari die Blobdaten nicht?

Unten ist ein Beispiel meines Codes (i zu viel hier nicht enthalten haben, so lassen Sie es mich wissen, wenn mehr Informationen erforderlich sind):

 // create blob: 
     const aFileParts = ['<a id="a"><b id="b">foo!</b></a>']; 
     const oMyBlob = new Blob(aFileParts, {type : 'text/html'}); 

     console.log('blob type' + oMyBlob.type); // outputs as 'text/html' 

     // initialize my indexeddb store: 
     return this.initializeStores().then(() => { 

     // add 'oMyBlob' to the FileData data store: 
     return this.db.add('FileData', 
      { FileName: 'foo', FileData: oMyBlob, FileType: 'audio' }).then(() => { 

      // Success 
      console.log('added ' + 'foo' + ' to FileData store.'); 

      // Get the file from the FileData store 
      return this.db.getByIndex('FileData', 'FileName', 'foo').then((record) => { 
       return Promise.resolve(); 
      }); 

      }, (error) => { 
      console.log(error); 
      this.handleError(error) 
      return Promise.reject(error); 
      }); 
     }, (error) => { 
     this.handleError(error); 
     return Promise.reject(error); 
     }); 

als Randnotiz - ich diese Daten speichern kann, als ArrayBuffer in Safari IndexedDB ohne Probleme. Das Problem ist, dass ich es dann wieder in einen Blob umwandeln muss, wenn ich es aus der Datenbank abrufe (die zusätzliche Verarbeitungsleistung ist nicht ideal).

Jede Hilfe wird sehr geschätzt.

Answer 1

So habe ich die Ursache des Problems gefunden. Wenn Sie meinen Speicher zu schaffen war ich einen falschen Index Referenzierung (vor allem, weil ich ein Online-Tutorial folgenden wurde)

const objectDataStore = evt.currentTarget.result.createObjectStore(
    'FileData', { keyPath: 'id', autoIncrement: true }); 

Der Schlüsselpfad ‚id‘ existiert nicht in meinem Speicher. Dies verursachte die Probleme beim Speichern der Blobs (seltsamerweise ohne gemeldeten Fehler ... und es schien keine Probleme in Chrome zu verursachen).

Der richtige Code:

const objectDataStore = evt.currentTarget.result.createObjectStore(
    'FileData', { keyPath: 'FileName', autoIncrement: true }); 

'Filename' ist der Name einer Eigenschaft in meinem Speicher Objekt. Dies behebt nun das Problem auf Desktop-Safari. Die Lektion hier ist also, um sicherzustellen, dass der KeyPath korrekt ist.

Allerdings habe ich jetzt ein neues Problem. In IOS Safari kann der Blob nicht auf dem indexedDb verbleiben. Ich erhalte den folgenden Fehler:

error: DOMError {name: "UnknownError", message: "An unknown error occurred within Indexed Database."} 

So scheint es, dass Blobs sind nicht für IndexedDB auf IOS Safari unterstützt (Ich gehe davon aus das ein Fehler ist). Für den Moment werde ich nur ArrayBuffers anstelle von Blobs speichern.