[英]Store image in Firebase Storage and save metadata in Firebase Cloud Firestore (Beta)
我正在尝试将图像上传到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不是对象(评估'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定义有什么问题? 非常感谢您的帮助。
也许您可以在完成上传后将数据上传到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
如果我了解您之后的内容,应该可以使用Firebase功能轻松完成:
https://firebase.google.com/docs/storage/extend-with-functions
您可以在存储中的某些内容发生更改时触发函数,从而轻松地将数据写入实时数据库或新的(呃)Firestore数据库。
这是我引用的页面中的一个简单片段,看看它可能是什么样子:
exports.generateThumbnail = functions.storage.object().onChange(event => {
// ...
});
来源链接
在Firestore中映像图像并在云存储上保存元信息
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;
})
)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.