Firebase tips(Storage:javascript)

FIREBASE TIPS

1. Upload file

upload.html

<script>
    firebase.initializeApp(config);
    firebase.auth().signInWithEmailAndPassword('[email protected]', 'xxx').catch((error) => {
        console.log('code:' + error.code + 'message' + error.message);
    });
    firebase.auth().onAuthStateChanged(function (user) {
        if (user) {
            console.log('login success');
        } else { }
    });

    var storage = firebase.storage();
    function upload() {
        var file = document.getElementById('loadFile').files[0];
        console.log('/images/' + file.name);
        var storageRef = storage.ref('/images/' + file.name);
        storageRef.put(file).then(function (snapshot) {
            console.log('Uploaded a blob or file!');
        });
    }

</script>
<body>
    <input type="file" id="loadFile" name="loadFile" />
    <input type="button" id="button" name="button" value="upload" onclick="upload()" />
</body>

storage.rule

service firebase.storage {
  match /b/{bucket}/o {
    match /{allPaths=**} {
      allow read, write: if request.auth != null;
    }
  }
}

result1

result2

2. Download file

<script>
    firebase.initializeApp(config);
    firebase.auth().signInWithEmailAndPassword('[email protected]', 'xxx').catch((error) => {
        console.log('code:' + error.code + 'message' + error.message);
    });
    firebase.auth().onAuthStateChanged(function (user) {
        if (user) {
            console.log('login success');
        } else { }
    });

    var storage = firebase.storage();
    storageRef = storage.ref('');
    storageRef.child('images/logo.png').getDownloadURL().then(function (url) {
        var xhr = new XMLHttpRequest();
        xhr.responseType = 'blob';
        xhr.onload = function (event) {
            var blob = xhr.response;
        };
        xhr.open('GET', url);
        xhr.send();

        // Or inserted into an <img> element:
        var img = document.getElementById('photo1');
        img.src = url;
    }).catch(function (error) {
        // Handle any errors
    });

</script>
<body>
    <img id="photo1">
</body>

result

3. Delete file

<script>
    firebase.initializeApp(config);
    firebase.auth().signInWithEmailAndPassword('[email protected]', 'coffee').catch((error) => {
        console.log('code:' + error.code + 'message' + error.message);
    });
    firebase.auth().onAuthStateChanged(function (user) {
        if (user) {
            console.log('login success');
        } else { }
    });

    var storage = firebase.storage();
    storageRef = storage.ref('');
    storageRef.child('images/logo.png').delete().then(() => {
        console.log('delete success');
    }).catch((error) => {
        console.log('delete error');
    });

</script>

result

Reference

이 문제에 관하여(Firebase tips(Storage:javascript)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/coffee_and_code/items/72f00581c032693c6e33

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다