So speichern Sie Bilder lokal in Uniapp

Mit der Entwicklung des mobilen Internets und mobiler Anwendungen wird es von Benutzern häufig zum Speichern und Verwalten einer großen Anzahl von Bildern während der Verwendung von Anwendungen verwendet. Uniapp ist ein auf Vue.js basierendes plattformübergreifendes Framework, mit dem sich problemlos kleine Programme, H5, Apps und andere Anwendungen entwickeln lassen. Während des Entwicklungsprozesses ist es manchmal notwendig, die erhaltenen Bilder lokal zu speichern, um sie beim nächsten Mal schnell aufrufen zu können. Schauen wir uns an, wie Uniapp Bilder lokal speichert.

1. Bilder erhalten
Während des Entwicklungsprozesses müssen wir Bildressourcen über uni.request oder uni.downloadFile erhalten.

1. uni.request
   uni.request ist eine gängige Methode zum Stellen von Netzwerkanfragen in Uniapp. Wir können Bildressourcen erhalten, indem wir das Attribut „responseType“ festlegen. Der spezifische Code lautet wie folgt:

uni.request({
  url: 'http://www.example.com/resource/1.jpg',
  responseType: 'arraybuffer',
  success: (res) => {
    uni.saveFile({
      tempFilePath: res.tempFilePath,
      success: (saveRes) => {
        console.log(saveRes);
      }
    });
  }
});

Darunter ist die URL der Link zum Bild und der Antworttyp ist „Arraybuffer“, was bedeutet, dass die Bildressource nach erfolgreicher Erfassung gespeichert wird zu tempFilePath, und schließlich wird das Bild lokal über uni.saveFile gespeichert.

2. uni.downloadFile
   uni.downloadFile ist eine gängige Methode zum Herunterladen von Dateien in Uniapp. Wir können Bildressourcen erhalten, indem wir die Attribute der URL festlegen. Der spezifische Code lautet wie folgt:

uni.downloadFile({
  url: 'http://www.example.com/resource/1.jpg',
  success: (res) => {
    uni.saveFile({
      tempFilePath: res.tempFilePath,
      success: (saveRes) => {
        console.log(saveRes);
      }
    });
  }
});

Unter anderem ist die URL der Link des Bildes. Nach dem erfolgreichen Abrufen wird es in tempFilePath gespeichert und schließlich wird das Bild lokal über uni.saveFile gespeichert.

2. Speichern Sie das Bild
Wir haben die Bildressource erhalten und müssen sie jetzt lokal speichern. Dateien können lokal über uni.saveFile gespeichert werden, der Speicherpfad ist jedoch für jede Plattform unterschiedlich. Uniapp kapselt eine Methode getFileSystemManager, um den lokalen Speicherpfad der aktuellen Plattform abzurufen.

Der spezifische Code lautet wie folgt:

uni.getFileSystemManager().access({
  path: '/storage/emulated/0/uniapp_demo/',
  success: () => {
    uni.saveFile({
      tempFilePath: res.tempFilePath,
      filePath: '/storage/emulated/0/uniapp_demo/1.jpg',
      success: (res) => {
        console.log('保存成功');
      }
    });
  },
  fail: () => {
    uni.getFileSystemManager().mkdir({
      dirPath: '/storage/emulated/0/uniapp_demo/',
      success: () => {
        uni.saveFile({
          tempFilePath: res.tempFilePath,
          filePath: '/storage/emulated/0/uniapp_demo/1.jpg',
          success: (res) => {
            console.log('保存成功');
          }
        });
      }
    });
  }
});

Verwenden Sie den Zugriff, um festzustellen, ob das Verzeichnis vorhanden ist. Verwenden Sie schließlich uni.saveFile um die Datei lokal zu speichern.

3. Fazit
Wie Sie Bilder lokal in Uniapp speichern, können Entwickler an ihre eigenen Bedürfnisse anpassen. Wenn Sie während der Nutzung auf Probleme stoßen, können Sie diese über die offizielle Website-Dokumentation von Uniapp oder Beiträge in der Community lösen. Ich hoffe, dieser Artikel kann für Sie hilfreich sein.

Das obige ist der detaillierte Inhalt vonSo speichern Sie Bilder lokal in Uniapp. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!