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

新手上路,请多包涵

我正在尝试将图像上传到 Firebase 存储并将几个特定的元数据保存到 Firebase 云。我正在用 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 不是一个对象(评估’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 定义有什么问题?非常感谢您的帮助。

原文由 peachmeier 发布,翻译遵循 CC BY-SA 4.0 许可协议

阅读 253
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

原文由 Eyk Rehbein 发布,翻译遵循 CC BY-SA 3.0 许可协议

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题