将图像存储在 Firebase Storage 中并将元数据保存在 Firebase Cloud Firestore（测试版）中

Posted 2023-02-22

【中文标题】将图像存储在 Firebase Storage 中并将元数据保存在 Firebase Cloud Firestore（测试版）中

【英文标题】：Store image in Firebase Storage and save metadata in Firebase Cloud Firestore (Beta)

【发布时间】：2018-04-13 19:08:55

【问题描述】：

我正在尝试将图像上传到 Firebase 存储并将一些特定元数据保存到 Firebase Cloud。 我正在用 javascript 编码。

目标是为 Firebase Cloud 设置自定义元数据，例如从用户必须填写的文本输入字段。

这就是我将图像存储到 Firebase 存储的方式：

storageRef.child('images/' + file.name).put(file, metadata).then(function(snapshot) 
        console.log('Uploaded', snapshot.totalBytes, 'bytes.');
        console.log(snapshot.metadata);
        var url = snapshot.downloadURL;
        console.log('File available at', url);
        // [START_EXCLUDE]
        document.getElementById('linkbox').innerhtml = '<a href="' +  url + '">Click For File</a>';
        // [END_EXCLUDE]
      ).catch(function(error) 
        // [START onfailure]
        console.error('Upload failed:', error);
        // [END onfailure]
      );
      // [END oncomplete]
    

我不知道如何在上传功能中集成另一个任务以将元数据写入 Firebase Cloud。 任何帮助将不胜感激！

@eykjs @Sam Storie：感谢您的帮助。 我改变了我的代码。现在，有一个我无法弄清楚的错误，是什么问题。 错误：TypeError: undefined is not an object (evalating 'selectedFile.name')

我的代码：

var selectedFile;

function handleFileSelect(event) 
	//$(".upload-group").show();
	selectedFile = event.target.files[0];
;

function confirmUpload() 
	var metadata = 
		contentType: 'image',
		customMetadata: 
			'dogType': 'Lab',
			'title': $("#imgTitle").val(),
			'caption': $("#imgDesc").val()
		,
	;
	var uploadTask = firebase.storage().ref().child('dogImages/' + selectedFile.name).put(selectedFile, metadata);
		uploadTask.on('state_changed', function(snapshot)
  		
	, function(error) 
  	
	 );

我的 selectedFile 定义有什么问题？ 非常感谢您的帮助。

【参考方案1】：

也许您可以在完成上传后将数据上传到 Firestore。

storageRef.child('images/' + file.name).put(file, metadata).then(function(snapshot) 
console.log('Uploaded', snapshot.totalBytes, 'bytes.');

let db = firebase.firestore();
let dbRef = db.collection("images").doc(file.name);

let setData = dbRef.set(
    //yourdata here
    downloadURl: snapshot.downloadURL
).then( () => 
    console.log("Data stored in Firestore!");
);

// your actions

【参考方案2】：

如果我了解您的需求，那么应该可以使用 Firebase 函数轻松完成：

https://firebase.google.com/docs/storage/extend-with-functions

您可以在存储中的某些内容发生变化时触发函数，从而轻松地将数据写入实时数据库或新的（er）Firestore 数据库。

这是我引用的页面中的一个简单的 sn-p，看看它可能是什么样子：

exports.generateThumbnail = functions.storage.object().onChange(event => 
  // ...
);

【参考方案3】：

来源Link

在 Firestore 中上传图片并将元信息保存在 Cloud Storage

import  AngularFireStorage, AngularFireUploadTask  from '@angular/fire/storage';
import  AngularFirestore, AngularFirestoreCollection  from '@angular/fire/firestore';
import  Observable  from 'rxjs';
import  finalize, tap  from 'rxjs/operators';

...
...
...

// The main task
this.task = this.storage.upload(path, file,  customMetadata );

// Get file progress percentage
this.percentage = this.task.percentageChanges();
this.snapshot = this.task.snapshotChanges().pipe(

  finalize(() => 
    // Get uploaded file storage path
    this.UploadedFileURL = fileRef.getDownloadURL();

    this.UploadedFileURL.subscribe(resp=>
      this.addImagetoDB(
        name: file.name,
        filepath: resp,
        size: this.fileSize
      );
      this.isUploading = false;
      this.isUploaded = true;
    ,error=>
      console.error(error);
    )
  ),
  tap(snap => 
      this.fileSize = snap.totalBytes;
  )
)