Firebase 앱에서 Cloud Storage의 모든 파일 목록을 가져 오는 방법은 무엇입니까?


101

이미지를 업로드하는 중입니다. 모든 것이 잘 작동하지만 100 개의 사진이 있으며 View폴더에있는 이미지의 전체 목록을 가져 오므로 모든 사진을 내 . 작업.


전체 코드 솔루션을 게시 할 수 있습니까?
ISS

답변:


92

JavaScript 릴리스 6.1 , iOS 릴리스 6.4Android 릴리스 버전 18.1 Firebase SDK에는 모두 파일을 나열하는 방법이 있습니다.

문서는 내가 체크 아웃하는 것이 좋습니다 그래서, 스파 스 지금까지 비트입니다 로사리오의 대답 자세한 내용을.


이 접근 방식은 때때로 유용 할 수 있기 때문에 이전 답변 :

현재 Firebase SDK에는 앱 내에서 Cloud Storage 폴더의 모든 파일을 나열하는 API 호출이 없습니다. 이러한 기능이 필요한 경우 파일을 나열 할 수있는 위치에 파일의 메타 데이터 (예 : 다운로드 URL)를 저장해야합니다. 중포 기지 실시간 데이터베이스클라우드 경우 FireStore은 이것에 대한 완벽하고 쉽게 다른 사람들과 URL을 공유 할 수 있습니다.

FriendlyPix 샘플 앱 에서 좋은 (하지만 다소 관련된) 샘플을 찾을 수 있습니다 . 웹 버전에 대한 관련 코드는 여기 에 있지만 iOS 및 Android 용 버전도 있습니다.


8
Firebase에서 구현 하시겠습니까?
Pier

55
실시간 데이터베이스에있는 모든 저장소 파일의 URL을 유지해야하는 경우 저장소에 폴더 계층 구조를 갖는 목적은 무엇인가요? 고유 한 이름을 가진 모든 파일을 동일한 수준에 저장할 수 있으며 폴더가 전혀 필요하지 않습니다 !!! 알다시피 그것은 모순입니다 !!! 기본적으로 폴더 계층 구조의 주된 근거는 폴더에있는 항목에 대한 사전 지식이없는 와일드 카드 쿼리이며 합리적으로 제공하지 않습니다.
abedfar

7
Firebase 저장소는 Google Cloud Storage에 구축되어 사용자가 말하는대로 정확하게 수행합니다. 모든 객체를 하나의 긴 목록에 저장합니다. Firebase 저장소는 그 위에 계층 구조를 모델링하는데, 이는 명백히 유출 된 추상화입니다. Firebase 저장소에서 폴더를 사용하는 일반적인 이유는 논리적 데이터 분리와 폴더 구조에 따라 보안 규칙을 만들기 때문입니다.
Frank van Puffelen

8
업로드 후 데이터베이스에 downloadUrl을 저장하기 전에 사용자 연결이 끊어지면 어떻게됩니까? 이 경우 폴더에서 기존 파일을 어떻게 발견합니까?
Oswaldo

10
지금은 어때 ? 2018 년에 이에 대한 직접적인 API가 있습니까?
디아즈 디아즈

47

2019 년 5 월부터 Cloud Storage 용 Firebase SDK 버전 6.1.0 에서 버킷의 모든 객체 나열을 지원합니다. 다음을 호출 listAll()하면됩니다 Reference.

    // Since you mentioned your images are in a folder,
    // we'll create a Reference to that folder:
    var storageRef = firebase.storage().ref("your_folder");


    // Now we get the references of these images
    storageRef.listAll().then(function(result) {
      result.items.forEach(function(imageRef) {
        // And finally display them
        displayImage(imageRef);
      });
    }).catch(function(error) {
      // Handle any errors
    });

    function displayImage(imageRef) {
      imageRef.getDownloadURL().then(function(url) {
        // TODO: Display the image on the UI
      }).catch(function(error) {
        // Handle any errors
      });
    }

제발 참고 이 기능을 사용하기 위해, 당신은 옵트해야하는 보안 규칙의 버전 2를 제작하여 수행 할 수 있습니다, rules_version = '2';보안 규칙의 첫 번째 줄을 :

    rules_version = '2';
    service firebase.storage {
      match /b/{bucket}/o {
        match /{allPaths=**} {

추가 참조를 위해 문서 를 확인하는 것이 좋습니다 .

또한,에 따라 설정 , 5 단계에서이 스크립트는 허용되지 않습니다 Node.js때문에 require("firebase/app");의지는 반환하지 firebase.storage()함수로. 이것은 import * as firebase from 'firebase/app';.


사용중인 플러그인
azheen

@azheen 나는 당신이 Flutter를 사용하고 있다고 가정합니다. 안타깝게도 아직 flutterfire에서는 사용할 수 없습니다. 당신은 그것을 추적 할 수 있습니다 이 문제
로사리오 페레 페르난데스

33

2017 년 3 월 이후 : Firebase Cloud Functions 가 추가 되고 Firebase가 Google Cloud와 더욱 긴밀하게 통합되어 이제 가능합니다.

Cloud Functions를 사용하면 Google Cloud Node 패키지를 사용하여 Cloud Storage에서 멋진 작업 을 수행 할 수 있습니다 . 다음은 Cloud Storage에서 모든 파일 URL을 배열로 가져 오는 예입니다. 이 기능은 무언가가 Google 클라우드 저장소에 저장 될 때마다 트리거됩니다.

참고 1 : 버킷 / 폴더의 모든 파일을 순환해야하므로 계산 비용이 많이 드는 작업입니다.

참고 2 : 나는 약속 등에 많은 세부 사항을 지불하지 않고 예제로 작성했습니다. 아이디어를 제공하기 위해.

const functions = require('firebase-functions');
const gcs = require('@google-cloud/storage')();

// let's trigger this function with a file upload to google cloud storage

exports.fileUploaded = functions.storage.object().onChange(event => {

  const object = event.data; // the object that was just uploaded
  const bucket = gcs.bucket(object.bucket);
  const signedUrlConfig = { action: 'read', expires: '03-17-2025' }; // this is a signed url configuration object

  var fileURLs = []; // array to hold all file urls 

  // this is just for the sake of this example. Ideally you should get the path from the object that is uploaded :)
  const folderPath = "a/path/you/want/its/folder/size/calculated";

  bucket.getFiles({ prefix: folderPath }, function(err, files) {
    // files = array of file objects
    // not the contents of these files, we're not downloading the files. 

    files.forEach(function(file) {
      file.getSignedUrl(signedUrlConfig, function(err, fileURL) {
        console.log(fileURL);
        fileURLs.push(fileURL);
      });
    });

  });

});

나는 이것이 당신에게 일반적인 아이디어를 제공하기를 바랍니다. 더 나은 클라우드 함수 예를 보려면 Firebase 용 Cloud Functions 샘플이 가득한 Google의 Github 저장소를 확인하세요 . Google Cloud Node API 문서 도 확인하세요.


35
이 중포 기지 그냥 중포 기지 SDK에이 API를 추가하지 않는 것이 너무 바보
Thaina

4
@Thaina 나는 그것이 규모와 관련이 있다고 생각합니다. 그들은 작은 앱뿐만 아니라 거인도 생각해야합니다. 경로에 수천 개의 파일이 있으면 어떨까요? 이 작업은 많은 컴퓨팅 성능을 소비하고 겉보기에 결백하고 단순한 호출마다 데이터베이스를 참조해야합니다. 대규모로 firebase를 사용하는 데 더 깊이 들어 갈수록 특정 타협이 이루어진 이유를 더 잘 이해할 수 있습니다.
johnozbay

1
이 gcs api에는 제한과 페이지 매김도 있으며, 위험을 파악하고 확장 가능한 방법을 선택하는 것은 API 소비자의 책임입니다. 그러나 과잉 보호를하여 우리의 선택을 줄이는 것은 좋은 결정이 아닙니다. 정말 비용이 경우 그들은 부하 요금을 청구 할 수 있습니다
Thaina

1
이것이 최고의 답변이어야합니다! 알림 주셔서 감사합니다. 현재 구문은 예제와 다릅니다. 대신 매개 변수로 콜백을 보내, 당신은 체인 A를 가지고 .then다음과 같은 :this.bucket .getFiles({ prefix: 'path/to/directory' }) .then((arr) => {})
JP 루

1
@JPLew 천만에요 :) 구문과 관련하여 콜백이 제외 된 경우에만 promise를 반환합니다. 따라서 원하는 것을 사용하는 것이 안전합니다. 여기 예를 참조하십시오. cloud.google.com/nodejs/docs/reference/storage/1.3.x/…
johnozbay

20

나열된 언어가 없으므로 Swift로 대답하겠습니다. 다운로드 목록을 작성하려면 Firebase 저장소와 Firebase 실시간 데이터베이스를 함께 사용하는 것이 좋습니다.

공유 :

// Firebase services
var database: FIRDatabase!
var storage: FIRStorage!
...
// Initialize Database, Auth, Storage
database = FIRDatabase.database()
storage = FIRStorage.storage()
...
// Initialize an array for your pictures
var picArray: [UIImage]()

업로드 :

let fileData = NSData() // get data...
let storageRef = storage.reference().child("myFiles/myFile")
storageRef.putData(fileData).observeStatus(.Success) { (snapshot) in
  // When the image has successfully uploaded, we get it's download URL
  let downloadURL = snapshot.metadata?.downloadURL()?.absoluteString
  // Write the download URL to the Realtime Database
  let dbRef = database.reference().child("myFiles/myFile")
  dbRef.setValue(downloadURL)
}

다운로드 :

let dbRef = database.reference().child("myFiles")
dbRef.observeEventType(.ChildAdded, withBlock: { (snapshot) in
  // Get download URL from snapshot
  let downloadURL = snapshot.value() as! String
  // Create a storage reference from the URL
  let storageRef = storage.referenceFromURL(downloadURL)
  // Download the data, assuming a max size of 1MB (you can change this as necessary)
  storageRef.dataWithMaxSize(1 * 1024 * 1024) { (data, error) -> Void in
    // Create a UIImage, add it to the array
    let pic = UIImage(data: data)
    picArray.append(pic)
  })
})

자세한 내용은 Zero to App : Develop with Firebase관련 소스 코드 에서이를 수행하는 방법에 대한 실제 예제를 참조하십시오.


3
하지만 Cloud Firestore에서 동일한 결과를 얻으려면 어떻게해야합니까?)
Max Kraev

5

해결 방법은 내부에 아무것도없는 파일 (예 : list.txt)을 만드는 것입니다.이 파일에서 모든 파일의 URL 목록으로 사용자 지정 메타 데이터 (즉, Map <String, String>)를 설정할 수 있습니다.
따라서 fodler의 모든 파일을 다운로드해야하는 경우 먼저 list.txt 파일의 메타 데이터를 다운로드 한 다음 사용자 지정 데이터를 반복하고 맵의 URL이있는 모든 파일을 다운로드합니다.


4
예, 이것은 해결 방법이지만 단일 list.txt에 대한 동시 쓰기를 처리 할 수 ​​없습니다
linquize

5

내 프로젝트를 작업 할 때도이 문제가 발생했습니다. 나는 그들이 최종 API 메소드를 제공하기를 정말로 바란다. 어쨌든, 이것이 제가 한 방법입니다. 이미지를 Firebase 저장소에 업로드 할 때 개체를 만들고 동시에이 개체를 Firebase 데이터베이스에 전달합니다. 이 개체는 이미지의 다운로드 URI를 포함합니다.

trailsRef.putFile(file).addOnSuccessListener(new OnSuccessListener<UploadTask.TaskSnapshot>() {
        @Override
        public void onSuccess(UploadTask.TaskSnapshot taskSnapshot) {
            Uri downloadUri = taskSnapshot.getDownloadUrl();
            DatabaseReference myRef = database.getReference().child("trails").child(trail.getUnique_id()).push();
            Image img = new Image(trail.getUnique_id(), downloadUri.toString());
            myRef.setValue(img);
        }
    });

나중에 폴더에서 이미지를 다운로드하려면 해당 폴더 아래의 파일을 반복하면됩니다. 이 폴더는 Firebase 저장소의 '폴더'와 이름이 같지만 원하는대로 이름을 지정할 수 있습니다. 나는 그것들을 별도의 스레드에 넣었습니다.

 @Override
protected List<Image> doInBackground(Trail... params) {

    String trialId = params[0].getUnique_id();
    mDatabase = FirebaseDatabase.getInstance().getReference();
    mDatabase.child("trails").child(trialId).addValueEventListener(new ValueEventListener() {
        @Override
        public void onDataChange(DataSnapshot dataSnapshot) {
            images = new ArrayList<>();
            Iterator<DataSnapshot> iter = dataSnapshot.getChildren().iterator();
            while (iter.hasNext()) {
                Image img = iter.next().getValue(Image.class);
                images.add(img);
            }
            isFinished = true;
        }

        @Override
        public void onCancelled(DatabaseError databaseError) {

        }
    });

이제 각 이미지에 대한 URI가 포함 된 개체 목록이 있으므로 원하는 모든 작업을 수행 할 수 있습니다. imageView에로드하기 위해 다른 스레드를 만들었습니다.

    @Override
protected List<Bitmap> doInBackground(List<Image>... params) {

    List<Bitmap> bitmaps = new ArrayList<>();

    for (int i = 0; i < params[0].size(); i++) {
        try {
            URL url = new URL(params[0].get(i).getImgUrl());
            Bitmap bmp = BitmapFactory.decodeStream(url.openConnection().getInputStream());
            bitmaps.add(bmp);
        } catch (MalformedURLException e) {
            e.printStackTrace();
        } catch (IOException e) {
            e.printStackTrace();
        }
    }

    return bitmaps;
}

이것은 Bitmap 목록을 반환하며 완료되면 기본 활동의 ImageView에 간단히 첨부합니다. 아래 메서드는 @Override입니다. 다른 스레드에서 인터페이스를 만들고 완료를 수신하기 때문입니다.

    @Override
public void processFinishForBitmap(List<Bitmap> bitmaps) {
    List<ImageView> imageViews = new ArrayList<>();
    View v;
    for (int i = 0; i < bitmaps.size(); i++) {
        v = mInflater.inflate(R.layout.gallery_item, mGallery, false);
        imageViews.add((ImageView) v.findViewById(R.id.id_index_gallery_item_image));
        imageViews.get(i).setImageBitmap(bitmaps.get(i));
        mGallery.addView(v);
    }
}

List Image가 먼저 반환 될 때까지 기다린 다음 스레드를 호출하여 List Bitmap에서 작업해야합니다. 이 경우 Image에는 URI가 포함됩니다.

    @Override
public void processFinish(List<Image> results) {
    Log.e(TAG, "get back " + results.size());

    LoadImageFromUrlTask loadImageFromUrlTask =  new LoadImageFromUrlTask();
    loadImageFromUrlTask.delegate = this;
    loadImageFromUrlTask.execute(results);
}

누군가가 도움이 되었기를 바랍니다. 앞으로 나 자신을위한 길드 라인 역할도 할 것이다.


5

Cloud Function을 사용하여 이미지를 데이터베이스에 추가하여 업로드 된 모든 이미지를 추적하고 데이터베이스에 저장하는 또 다른 방법입니다.

exports.fileUploaded = functions.storage.object().onChange(event => {

    const object = event.data; // the object that was just uploaded
    const contentType = event.data.contentType; // This is the image Mimme type\

    // Exit if this is triggered on a file that is not an image.
    if (!contentType.startsWith('image/')) {
        console.log('This is not an image.');
        return null;
    }

    // Get the Signed URLs for the thumbnail and original image.
    const config = {
        action: 'read',
        expires: '03-01-2500'
    };

    const bucket = gcs.bucket(event.data.bucket);
    const filePath = event.data.name;
    const file = bucket.file(filePath);

    file.getSignedUrl(config, function(err, fileURL) {
        console.log(fileURL);
        admin.database().ref('images').push({
            src: fileURL
        });
    });
});

전체 코드 : https://gist.github.com/bossly/fb03686f2cb1699c2717a0359880cf84


5

노드 js의 경우이 코드를 사용했습니다.

const Storage = require('@google-cloud/storage');
const storage = new Storage({projectId: 'PROJECT_ID', keyFilename: 'D:\\keyFileName.json'});
const bucket = storage.bucket('project.appspot.com'); //gs://project.appspot.com
bucket.getFiles().then(results => {
    const files = results[0];
    console.log('Total files:', files.length);
    files.forEach(file => {
      file.download({destination: `D:\\${file}`}).catch(error => console.log('Error: ', error))
    });
}).catch(err => {
    console.error('ERROR:', err);
  });

당신은 내 하루를 구했습니다!
hugo blanc

4

listAll () 메소드를 사용하여 Firebase 저장소 디렉토리의 파일을 나열 할 수 있습니다. 이 방법을 사용하려면이 버전의 Firebase 저장소를 구현해야합니다. 'com.google.firebase : firebase-storage : 18.1.1'

https://firebase.google.com/docs/storage/android/list-files

보안 규칙을 버전 2로 업그레이드하십시오.


3

실제로 이것은 가능하지만 Firebase에서 대신 Google Cloud API 로만 가능합니다 . Firebase 저장소는 Google Cloud API로 쉽게 접근 할 수 있는 Google Cloud Storage 버킷 이기 때문입니다.하지만 인증을 위해 Firebase 저장소 대신 OAuth를 사용해야합니다.


3

나는 같은 문제에 직면했고, 내 것은 훨씬 더 복잡합니다.

관리자는 오디오 및 pdf 파일을 저장소에 업로드합니다.

  • audios / season1, season2 ... / class1, class 2 / .mp3 파일

  • books / .pdf 파일

Android 앱은 하위 폴더 및 파일 목록을 가져와야합니다.

해결책은 스토리지에서 업로드 이벤트를 포착하고 클라우드 기능을 사용하여 Firestore에 동일한 구조를 생성하는 것입니다.

1 단계 : Firestore에서 수동으로 '저장소'컬렉션 및 '오디오 / 책'문서 만들기

여기에 이미지 설명 입력

2 단계 : 클라우드 기능 설정

약 15 분 정도 걸릴 수 있습니다. https://www.youtube.com/watch?v=DYfP-UIKxH0&list=PLl-K7zZEsYLkPZHe41m4jfAxUi0JjLgSM&index=1

3 단계 : 클라우드 기능을 사용하여 업로드 이벤트 포착

import * as functions from 'firebase-functions';
import * as admin from 'firebase-admin';
admin.initializeApp(functions.config().firebase);
const path = require('path');

export const onFileUpload = functions.storage.object().onFinalize(async (object) => {
        let filePath = object.name; // File path in the bucket.
        const contentType = object.contentType; // File content type.
        const metageneration = object.metageneration; // Number of times metadata has been generated. New objects have a value of 1.
        if (metageneration !== "1") return;

        // Get the file name.
        const fileName = path.basename(filePath);
        filePath = filePath.substring(0, filePath.length - 1);
        console.log('contentType ' + contentType);
        console.log('fileName ' + fileName);
        console.log('filePath ' + filePath);
        console.log('path.dirname(filePath) ' + path.dirname(filePath));
        filePath = path.dirname(filePath);
        const pathArray = filePath.split("/");
        let ref = '';
        for (const item of pathArray) {
            if (ref.length === 0) {
                ref = item;
            }
            else {
                ref = ref.concat('/sub/').concat(item);
            }
        }

        ref = 'storage/'.concat(ref).concat('/sub')
        admin.firestore().collection(ref).doc(fileName).create({})
                .then(result => {console.log('onFileUpload:updated')})
                .catch(error => {
                    console.log(error);
                });
    });

4 단계 : Firestore를 사용하여 Android 앱에서 폴더 / 파일 목록 검색

private static final String STORAGE_DOC = "storage/";
    public static void getMediaCollection(String path, OnCompleteListener onCompleteListener) {
        String[] pathArray = path.split("/");
        String doc = null;
        for (String item : pathArray) {
            if (TextUtils.isEmpty(doc)) doc = STORAGE_DOC.concat(item);
            else doc = doc.concat("/sub/").concat(item);
        }
        doc = doc.concat("/sub");

        getFirestore().collection(doc).get().addOnCompleteListener(onCompleteListener);
    }

5 단계 : 다운로드 URL 가져 오기

public static void downloadMediaFile(String path, OnCompleteListener<Uri> onCompleteListener) {
        getStorage().getReference().child(path).getDownloadUrl().addOnCompleteListener(onCompleteListener);
    }

노트

firestore는 컬렉션 목록 검색을 지원하지 않기 때문에 각 항목에 "sub"컬렉션을 넣어야합니다.

해결책을 찾는 데 3 일이 걸렸습니다. 기껏해야 최대 3 시간이 걸릴 것입니다.

건배.


내가 작업중인 시나리오와 똑같습니다. 누구든지 나에게 플러터 코드를 보낼 수 있습니까? 다운로드가 아닌 파일 배치 만 업로드해야했기 때문입니다.
Mahesh Peri

Flutter SDK (dart 언어)
Mahesh Peri

1
cloud firestore는 아직 flutter를 지원하지 않습니다 . firebase.google.com/docs/firestore . 빠른 접근 방식은 클라우드 기능을 사용하여 API를 작성한 다음 평상시처럼 편안하게 이러한 API에 액세스하는 것입니다. 그것은 클라우드 기능에 익숙해하는 데 몇 시간이 걸릴 수도 있습니다, 이러한 교육 비디오는 제비에 매우 쉽게 : D youtube.com/...은
thanhbinh84

3

JavaScript 솔루션에 대한 Rosário Pereira Fernandes의 답변 확장 :

  1. 컴퓨터에 Firebase 설치
npm install -g firebase-tools

  1. firebase init JavaScript에서 기본 언어로 설정
  2. 생성 된 프로젝트의 루트 폴더에서 npm 설치 실행
   npm install --save firebase
   npm install @google-cloud/storage
   npm install @google-cloud/firestore
   ... <any other dependency needed>
  1. 다음과 같이 프로젝트에 기본이 아닌 종속성을 추가하십시오.
    "firebase": "^6.3.3",
    "@google-cloud/storage": "^3.0.3"

functions / package.json

{
  "name": "functions",
  "description": "Cloud Functions for Firebase",
  "scripts": {
    "lint": "eslint .",
    "serve": "firebase serve --only functions",
    "shell": "firebase functions:shell",
    "start": "npm run shell",
    "deploy": "firebase deploy --only functions",
    "logs": "firebase functions:log"
  },
  "engines": {
    "node": "10"
  },
  "dependencies": {
    "@google-cloud/storage": "^3.0.3",
    "firebase": "^6.3.3",
    "firebase-admin": "^8.0.0",
    "firebase-functions": "^3.1.0"
  },
  "devDependencies": {
    "eslint": "^5.12.0",
    "eslint-plugin-promise": "^4.0.1",
    "firebase-functions-test": "^0.1.6"
  },
  "private": true
}

  1. 일종의 listAll함수 만들기

index.js

var serviceAccount = require("./key.json");
const functions = require('firebase-functions');

const images = require('./images.js');

var admin = require("firebase-admin");

admin.initializeApp({
    credential: admin.credential.cert(serviceAccount),
    databaseURL: "https://<my_project>.firebaseio.com"
});

const bucket = admin.storage().bucket('<my_bucket>.appspot.com')

exports.getImages = functions.https.onRequest((request, response) => {
    images.getImages(bucket)
        .then(urls => response.status(200).send({ data: { urls } }))
        .catch(err => console.error(err));
})

images.js

module.exports = {
    getImages
}

const query = {
    directory: 'images'
};

function getImages(bucket) {
    return bucket.getFiles(query)
        .then(response => getUrls(response))
        .catch(err => console.error(err));
}

function getUrls(response) {
    const promises = []
    response.forEach( files => {
        files.forEach (file => {
            promises.push(getSignedUrl(file));
        });
    });
    return Promise.all(promises).then(result => getParsedUrls(result));
}

function getSignedUrl(file) {
    return file.getSignedUrl({
        action: 'read',
        expires: '09-01-2019'
    })
}

function getParsedUrls(result) {
    return JSON.stringify(result.map(mediaLink => createMedia(mediaLink)));
}

function createMedia(mediaLink) {
    const reference = {};
    reference.mediaLink = mediaLink[0];
    return reference;
}

  1. 실행 firebase deploy하여 클라우드 기능 업로드
  2. 앱에서 사용자 지정 함수 호출

build.gradle

dependencies {
...
  implementation 'com.google.firebase:firebase-functions:18.1.0'
...
}

코 틀린 클래스

  private val functions = FirebaseFunctions.getInstance()
  val cloudFunction = functions.getHttpsCallable("getImages")
  cloudFunction.call().addOnSuccessListener {...}

이 기능의 추가 개발과 관련하여 여기서 발견 할 수있는 몇 가지 문제가 발생했습니다 .


2

JS로이를 수행하려면

div 컨테이너에 직접 추가하거나 배열에 푸시 할 수 있습니다. 아래는 div에 추가하는 방법을 보여줍니다.

1) 이미지를 저장소에 저장할 때 다음 구조로 Firebase 데이터베이스에 이미지에 대한 참조를 만듭니다.

/images/(imageName){
   description: "" , 
   imageSrc : (imageSource) 
}

2) 문서를로드 할 때 다음 코드를 사용하여 저장소가 아닌 데이터베이스에서 모든 이미지 소스 URL을 가져옵니다.

$(document).ready(function(){

var query = firebase.database().ref('images/').orderByKey();
query.once("value").then(function(snapshot){

    snapshot.forEach(function(childSnapshot){

        var imageName = childSnapshot.key;
        var childData = childSnapshot.val();
        var imageSource = childData.url;

        $('#imageGallery').append("<div><img src='"+imageSource+"'/></div>");

    })
})
});

2

다음 코드를 사용할 수 있습니다. 여기에서는 이미지를 firebase 저장소에 업로드 한 다음 이미지 다운로드 URL을 firebase 데이터베이스에 저장합니다.

//getting the storage reference
            StorageReference sRef = storageReference.child(Constants.STORAGE_PATH_UPLOADS + System.currentTimeMillis() + "." + getFileExtension(filePath));

            //adding the file to reference 
            sRef.putFile(filePath)
                    .addOnSuccessListener(new OnSuccessListener<UploadTask.TaskSnapshot>() {
                        @Override
                        public void onSuccess(UploadTask.TaskSnapshot taskSnapshot) {
                            //dismissing the progress dialog
                            progressDialog.dismiss();

                            //displaying success toast 
                            Toast.makeText(getApplicationContext(), "File Uploaded ", Toast.LENGTH_LONG).show();

                            //creating the upload object to store uploaded image details 
                            Upload upload = new Upload(editTextName.getText().toString().trim(), taskSnapshot.getDownloadUrl().toString());

                            //adding an upload to firebase database 
                            String uploadId = mDatabase.push().getKey();
                            mDatabase.child(uploadId).setValue(upload);
                        }
                    })
                    .addOnFailureListener(new OnFailureListener() {
                        @Override
                        public void onFailure(@NonNull Exception exception) {
                            progressDialog.dismiss();
                            Toast.makeText(getApplicationContext(), exception.getMessage(), Toast.LENGTH_LONG).show();
                        }
                    })
                    .addOnProgressListener(new OnProgressListener<UploadTask.TaskSnapshot>() {
                        @Override
                        public void onProgress(UploadTask.TaskSnapshot taskSnapshot) {
                            //displaying the upload progress 
                            double progress = (100.0 * taskSnapshot.getBytesTransferred()) / taskSnapshot.getTotalByteCount();
                            progressDialog.setMessage("Uploaded " + ((int) progress) + "%...");
                        }
                    });

이제 firebase 데이터베이스에 저장된 모든 이미지를 가져 오려면

//adding an event listener to fetch values
        mDatabase.addValueEventListener(new ValueEventListener() {
            @Override
            public void onDataChange(DataSnapshot snapshot) {
                //dismissing the progress dialog 
                progressDialog.dismiss();

                //iterating through all the values in database
                for (DataSnapshot postSnapshot : snapshot.getChildren()) {
                    Upload upload = postSnapshot.getValue(Upload.class);
                    uploads.add(upload);
                }
                //creating adapter
                adapter = new MyAdapter(getApplicationContext(), uploads);

                //adding adapter to recyclerview
                recyclerView.setAdapter(adapter);
            }

            @Override
            public void onCancelled(DatabaseError databaseError) {
                progressDialog.dismiss();
            }
        });

자세한 내용은 내 게시물 Firebase Storage Example을 참조하십시오 .


내가 링크에서 예를 따라,하지만 이미지가 RecyclerView에서 중포 기지에서 표시되지 않습니다
Wolfiebae

1

그래서 파이어베이스 저장소에서 자산을 다운로드해야하는 프로젝트가 있었기 때문에이 문제를 직접 해결해야했습니다. 방법은 다음과 같습니다.

1- 먼저, 예를 들어 모델 데이터를 만듭니다 class Choice{}. 그 클래스에서 이미지 이름이라는 문자열 변수를 정의하므로 다음과 같습니다.

class Choice {
    .....
    String imageName;
}

2- 데이터베이스 / firebase 데이터베이스에서 이미지 이름을 개체에 하드 코딩합니다. 따라서 Apple.png라는 이미지 이름이있는 경우

Choice myChoice = new Choice(...,....,"Apple.png");

3- 이제 firebase 저장소의 자산에 대한 링크를 얻으십시오.

gs://your-project-name.appspot.com/

이 같은

4- 마지막으로 firebase 저장소 참조를 초기화하고 이와 같은 루프로 파일 가져 오기를 시작합니다.

storageRef = storage.getReferenceFromUrl(firebaseRefURL).child(imagePath);

File localFile = File.createTempFile("images", "png");
storageRef.getFile(localFile).addOnSuccessListener(new OnSuccessListener<FileDownloadTask.TaskSnapshot>() {

@Override
public void onSuccess(FileDownloadTask.TaskSnapshot taskSnapshot) {
    //Dismiss Progress Dialog\\
}

5- 그게 다야


1
#In Python

import firebase_admin
from firebase_admin import credentials
from firebase_admin import storage
import datetime
import urllib.request


def image_download(url, name_img) :
    urllib.request.urlretrieve(url, name_img)

cred = credentials.Certificate("credentials.json")

# Initialize the app with a service account, granting admin privileges
app = firebase_admin.initialize_app(cred, {
    'storageBucket': 'YOURSTORAGEBUCKETNAME.appspot.com',
})
url_img = "gs://YOURSTORAGEBUCKETNAME.appspot.com/"
bucket_1 = storage.bucket(app=app)
image_urls = []

for blob in bucket_1.list_blobs():
    name = str(blob.name)
    #print(name)
    blob_img = bucket_1.blob(name)
    X_url = blob_img.generate_signed_url(datetime.timedelta(seconds = 300), method='GET')
    #print(X_url)
    image_urls.append(X_url)


PATH = ['Where you want to save the image']
for path in PATH:
    i = 1
    for url  in image_urls:
        name_img = str(path + "image"+str(i)+".jpg")
        image_download(url, name_img)
        i+=1

그냥 간단한 파이썬 클래스와 블롭 키워드 필요한 API의 필요가 없습니다
밀라노 Hazra

0

나는 AngularFire모든 것을 얻기 위해 다음을 사용 하고 사용하고 있습니다.downloadURL

getPhotos(id: string): Observable<string[]> {
    const ref = this.storage.ref(`photos/${id}`)
    return ref.listAll().pipe(switchMap(list => {
      const calls: Promise<string>[] = [];
      list.items.forEach(item => calls.push(item.getDownloadURL()))
      return Promise.all(calls)
    }));
}

-1

Android의 경우 가장 좋은 방법은 FirebaseUI 및 Glide를 사용하는 것입니다.

라이브러리를 가져 오려면 gradle / 앱에 추가해야합니다. 이미 Glide가 있습니다!

implementation 'com.firebaseui:firebase-ui-storage:4.1.0'

그리고 코드에서

// Reference to an image file in Cloud Storage
StorageReference storageReference = FirebaseStorage.getInstance().getReference();

// ImageView in your Activity
ImageView imageView = findViewById(R.id.imageView);

// Download directly from StorageReference using Glide
// (See MyAppGlideModule for Loader registration)
GlideApp.with(this /* context */)
        .load(storageReference)
        .into(imageView);
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.