Heim  >  Fragen und Antworten  >  Hauptteil

Lokaler Speicher: Eine Anleitung zum Speichern und Wiederherstellen von Dateiobjekten

<p>Ich habe eine Anwendung mit HTML5/JavaScript, die </p> <pre class="brush:php;toolbar:false;"><input type="file" take="image/*;capture=camera" onchange="gotPhoto(this)"></pre> ; <p>Zum Aufnehmen von Kamerabildern. Da meine Anwendung offline ausgeführt werden möchte, wie speichere ich ein Dateiobjekt (https://developer.mozilla.org/en-US/docs/Web/API/File) im lokalen Speicher, damit es später wieder abgerufen werden kann? beim Hochladen über Ajax? </p> <p>Ich erhalte das Dateiobjekt von...</p> <pre class="brush:php;toolbar:false;">function gotPhoto(element) { var file = element.files[0]; //Ich möchte 'Datei' hier im lokalen Speicher speichern :-( }</pre> <p>Ich kann das Objekt in eine Zeichenfolge konvertieren und speichern, aber wenn ich es wiederherstelle, wird es nicht mehr als Dateiobjekt erkannt und kann daher nicht zum Abrufen des Dateiinhalts verwendet werden. </p> <p>Ich habe das Gefühl, dass dies unerreichbar ist, aber ich bin offen für Vorschläge. </p> <p>Mein Workaround bestand übrigens darin, den Dateiinhalt beim Speichern zu lesen und den gesamten Inhalt im lokalen Speicher zu speichern. Dies funktioniert, verbraucht jedoch schnell lokalen Speicher, da es sich bei jeder Datei um ein Foto mit mehr als 1 MB handelt. </p>
P粉253518620P粉253518620446 Tage vor485

Antworte allen(2)Ich werde antworten

  • P粉005134685

    P粉0051346852023-08-23 12:08:41

    将其转换为base64然后保存。

    function gotPhoto(element) {
       var file = element.files[0];
       var reader = new FileReader()
       reader.onload = function(base64) {
          localStorage["file"] = base64;
       }
       reader.readAsDataURL(file);
    }
    // 保存到本地存储
    
    function getPhoto() {
       var base64 = localStorage["file"];
       var base64Parts = base64.split(",");
       var fileFormat = base64Parts[0].split(";")[1];
       var fileContent = base64Parts[1];
       var file = new File([fileContent], "文件名", {type: fileFormat});
       return file;
    }
    // 获取文件对象

    Antwort
    0
  • P粉811349112

    P粉8113491122023-08-23 11:45:18

    您无法序列化文件API对象。

    虽然这并不能解决具体的问题,但是...... 虽然我没有使用过这个,但是如果您查看这篇文章,似乎有一些方法(虽然大多数浏览器尚不支持)可以将离线图像数据存储到某些文件中,以便在用户在线时恢复它们(而不使用localStorage)

    Antwort
    0
  • StornierenAntwort