uniappで写真をローカルに保存する方法

モバイル インターネットとモバイル アプリケーションの発展に伴い、ユーザーはアプリケーションの使用中に大量の写真を保存および管理することが広く使用されています。 Uniapp は、Vue.js をベースに開発されたクロスプラットフォーム フレームワークで、小さなプログラム、H5、App、その他のアプリケーションを簡単に開発できます。開発プロセスでは、次回の呼び出しのために取得した写真をローカルに保存する必要がある場合がありますが、Uniapp がどのように写真をローカルに保存するかを見てみましょう。

1. 画像の取得
開発プロセスでは画像を使用する必要があるため、uni.request または uni.dow​​nloadFile を通じて画像リソースを取得できます。

1. uni.request
   uni.request は、Uniapp でネットワーク リクエストを行うための一般的なメソッドであり、responseType 属性を設定することで画像リソースを取得できます。具体的なコードは次のとおりです:

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

このうち、urlは画像へのリンク、responseTypeは'arraybuffer'となっており、画像リソースをバイナリ形式で取得することを意味します。取得が成功すると、tempFilePath に保存され、最後に uni.saveFile を渡して画像をローカルに保存します。

2. uni.dow​​nloadFile
   uni.dow​​nloadFile は Uniapp でファイルをダウンロードするための一般的なメソッドであり、URL の属性を設定することで画像リソースを取得できます。具体的なコードは以下の通りです:

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

このうち、URLは画像のリンクとなっており、取得に成功するとtempFilePathに保存され、最終的に画像はローカルに保存されます。 uni.saveファイル。

2. 画像を保存します
画像リソースを取得したので、それをローカルに保存する必要があります。ファイルは uni.saveFile を通じてローカルに保存できますが、保存パスはプラットフォームごとに異なります。Uniapp は getFileSystemManager メソッドをカプセル化して、現在のプラットフォームのローカル ストレージ パスを取得します。

具体的なコードは次のとおりです:

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

このうち、path はローカルストレージのパスです。access を使用してディレクトリが存在するかどうかを確認します。存在しない場合は、mkdir を使用して最後に、uni.saveFile. を通じてファイルをローカルに保存します。

3. 結論
上記は、Uniapp でローカルに写真を保存する方法であり、開発者は自分のニーズに応じて調整できます。使用中に問題が発生した場合は、Uniapp 公式 Web サイトのドキュメントまたはコミュニティの投稿を通じて問題を解決できます。この記事があなたのお役に立てば幸いです。

以上がuniappで写真をローカルに保存する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。