मैं फायरबेस के लिए नया हूं इसलिए कृपया विनम्र रहें। मैं एक वेब ऐप बना रहा हूं जहां लोग अपनी प्रोफाइल पर इमेज स्टोर कर सकते हैं। इमेज अपलोड-फाइल्स#full_example में बताए अनुसार क्लाउड स्टोरेज में जाती हैं। अपलोड होने के बाद मैं अपने रीयल-टाइम डीबी में डाउनलोड यूआरएल सहेजता हूं। उपयोगकर्ताओं को फायरबेस के माध्यम से प्रमाणित करना होगा।

login(username: string, password: string): any {
    this.httpStatus.setHttpStatus(true);
    return this.firebase
        .auth()
        .signInWithEmailAndPassword(username, password)
        .then((firebaseUser: firebase.auth.UserCredential) => {
            this.httpStatus.setHttpStatus(false);
            this.userService.setUser(firebaseUser);
            if (!this.userService.getUser().emailVerified) {
                this.userService.getUser().sendEmailVerification();
            }
            this.router.navigate(['/profile']);
        });
}

इस प्रकार मैं क्लाइंट साइड से अपलोड करता हूं:

uploadFile() {
    this.httpStatus.setHttpStatus(true);
    const file = this.file.nativeElement.files[0];
    const uid = this.userService.getUser().uid;
    const firebase = this.firebaseService.firebase;
    const storageRef = firebase.storage().ref();

    // Create the file metadata
    const metadata = {
        contentType: file.type
    };
    console.log(file);
    // Upload file and metadata to the object 'images/mountains.jpg'
    const uploadTask = storageRef
        .child('userFiles' + '/' + uid + '/' + file.name)
        .put(file, metadata);

    // Listen for state changes, errors, and completion of the upload.
    uploadTask.on(
        firebase.storage.TaskEvent.STATE_CHANGED, // or 'state_changed'
        function(snapshot) {
            // Get task progress, including the number of bytes uploaded and the total number of bytes to be uploaded
            const progress =
                (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
            console.log('Upload is ' + progress + '% done');
            switch (snapshot.state) {
                case firebase.storage.TaskState.PAUSED: // or 'paused'
                    console.log('Upload is paused');
                    break;
                case firebase.storage.TaskState.RUNNING: // or 'running'
                    console.log('Upload is running');
                    break;
            }
        },
        function(error) {
            this.httpStatus.setHttpStatus(false);
            this.error.emit(error);
        },
        () => {
            // Upload completed successfully, now we can get the download URL
            uploadTask.snapshot.ref.getDownloadURL().then(downloadURL => {
                this.httpStatus.setHttpStatus(false);
                this.success.emit({url: downloadURL, name: file.name});
            });
        }
    );
}

इस प्रकार मैं उस यूआरएल को अपने डीबी में सहेजता हूं:

async setDocument(req, callback, errorCallback) {
    const url = req.body.url;
    const user = req.body.user;
    const fileName = req.body.name;
    try {
        await this.verify(req.body.token);
        const result = await this.db
            .collection('users')
            .doc(user.uid)
            .collection('docs')
            .doc(fileName)
            .set({
                url,
                fileName
            });
        callback(result);
    } catch (error) {
        errorCallback(error);
    }
}

इस प्रकार मैं इन यूआरएल को वापस करता हूं:

async getDocuments(req, callback, errorCallback) {
    const url = req.body.url;
    const user = req.body.user;
    try {
        await this.verifySameUIDOrAccesslevel(
            req.body.token,
            req.body.user.uid,
            5
        );
        const result = await this.db
            .collection('users')
            .doc(user.uid)
            .collection('docs')
            .get();
        const data = [];
        result.forEach(each => data.push(each.data()));
        callback(data);
    } catch (error) {
        console.log(error);
        errorCallback(error);
    }
}

क्लाइंट की प्रतिक्रिया इस तरह दिखती है:

[{"url":"https://firebasestorage.googleapis.com/v0/b/{{projectId}}.appspot.com/o/userFiles%2FIZxlZnKhQzYEonZf5F6SpMvu1af1%2FNelson_Neves_picuture.gif?alt=media&token=27cce93f-41a3-460b-84e9-4e8b8ceafc41","fileName":"Nelson_Neves_picuture.gif"}]

प्रोफाइल पर मेरे पास इस यूआरएल के साथ स्रोत के रूप में एक एंकर टैग है। जो हल करता है:

{
  "error": {
    "code": 403,
    "message": "Permission denied. Could not perform this operation"
 }
}

मुझे पता है कि इसका "टोकन = 222adabc-2bc4-4b07-b57f-60cbf2aa204c" से कुछ लेना-देना है और मुझे समझ में नहीं आता कि कुछ फाइलें क्यों पढ़ी जा सकती हैं और अन्य नहीं।

भंडारण के लिए मेरे नियम बस हैं:

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

क्या कोई कृपया मुझे यह टोकन समझा सकता है और मैं अपने प्रमाणित उपयोगकर्ताओं के साथ एक स्थायी यूआरएल कैसे साझा कर सकता हूं?

चियर्स

1
Frontend Friedrich 7 पद 2018, 10:33

1 उत्तर

सबसे बढ़िया उत्तर

समस्या यह है कि आप डाउनलोड यूआरएल को कैसे कॉल कर रहे हैं। अपलोड टास्क रेफरी के बजाय आपको एक ही फाइल रेफरी यूआरएल का उपयोग करना होगा।

this.imageFile.name.substr(this.imageFile.name.lastIndexOf('.'));
  const fileRef = this.storage.ref(this.filePath); <--- here
  this.task = this.storage.upload(this.filePath, this.imageFile);
  this.uploadPercent = this.task.percentageChanges();
  this.task
    .snapshotChanges()
    .pipe(
      finalize(() => {
        this.downloadURL = fileRef.getDownloadURL(); <--- here
        this.downloadURL.subscribe(url => {
          this.imageUrl = url;
        });
      })
    )
    .subscribe();
  return this.uploadPercent;
}
1
rijin 7 पद 2018, 17:03