Comment enregistrer des images localement dans Uniapp

Avec le développement de l'Internet mobile et des applications mobiles, il a été largement utilisé par les utilisateurs pour stocker et gérer un grand nombre d'images lors de l'utilisation d'applications. Uniapp est un framework multiplateforme développé sur la base de Vue.js, qui peut facilement développer de petits programmes, H5, App et autres applications. Pendant le processus de développement, il est parfois nécessaire de sauvegarder les images obtenues localement pour un appel rapide la prochaine fois. Voyons comment Uniapp enregistre les images localement.

1. Obtenir des images
Pendant le processus de développement, nous devons utiliser des images. Nous pouvons obtenir des ressources d'images via uni.request ou uni.downloadFile.

1. uni.request
   uni.request est une méthode courante pour effectuer des requêtes réseau dans Uniapp. Nous pouvons obtenir des ressources d'image en définissant l'attribut réponseType. Le code spécifique est le suivant :

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

Parmi eux, l'url est le lien vers l'image, et le type de réponse est « arraybuffer », ce qui signifie que la ressource image est obtenue sous forme binaire. Après une acquisition réussie, elle est enregistrée. à tempFilePath, et enfin l'image est enregistrée localement via uni.saveFile .

2. uni.downloadFile
   uni.downloadFile est une méthode courante pour télécharger des fichiers dans Uniapp. Nous pouvons obtenir des ressources d'image en définissant les attributs de l'URL. Le code spécifique est le suivant :

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

Parmi eux, l'url est le lien de l'image. Après l'avoir obtenue avec succès, elle est enregistrée dans tempFilePath, et enfin l'image est enregistrée localement via uni.saveFile.

2. Enregistrez l'image
Nous avons obtenu la ressource image et nous devons maintenant la sauvegarder localement. Les fichiers peuvent être enregistrés localement via uni.saveFile, mais le chemin de sauvegarde est différent pour chaque plateforme. Uniapp encapsule une méthode getFileSystemManager pour obtenir le chemin de stockage local de la plateforme actuelle.

Le code spécifique est le suivant :

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('保存成功');
          }
        });
      }
    });
  }
});

Parmi eux, path est le chemin de stockage local. Utilisez l'accès pour déterminer si le répertoire existe. S'il n'existe pas, utilisez mkdir pour créer le répertoire. Enfin, utilisez uni.saveFile. pour enregistrer le fichier localement.

3. Conclusion
Ce qui précède explique comment enregistrer des images localement dans Uniapp. Les développeurs peuvent l'ajuster en fonction de leurs propres besoins. Si vous rencontrez des problèmes lors de l'utilisation, vous pouvez les résoudre via la documentation du site officiel d'Uniapp ou via des publications dans la communauté. J'espère que cet article pourra vous être utile.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!