如何使用java脚本中的Firestore将用户对应的文件保存在存储中

Question

我想从Firestore创建一个表列表，其中有一个附件字段，用户在注册期间上传该字段。文件以他们的uid作为名称保存，所以我想获得他们上传的与用户相对应的图像。

这是表格html

<table class="fl-table">
<thead>
<th>No</th>
<th>First Name</th>
<th>Last Name</th>
<th>Email Address</th>
<th>Phone Number</th>
<th>Country Of Residence</th>
<th>Attached File</th>
</thead>
<tbody id="tbody1"></tbody>
</table>

这是html文件，我想放一个文件链接或打开相应图像的按钮

这是javascript

const app = initializeApp(firebaseConfig);
let db = getFirestore();

var attendantNumber = 0;
var tbody = document.getElementById('tbody1');
function AddItemToTable(fname, lname, email, phoneNumber, country, "attachedfile"){
let trow = document.createElement('tr');
let td1 = document.createElement('td');
let td2 = document.createElement('td');
let td3 = document.createElement('td');
let td4 = document.createElement('td');
let td5 = document.createElement('td');
let td6 = document.createElement('td');
let td7 = document.createElement('td');
td1.innerHTML = ++attendantNumber;
td2.innerHTML = fname;
td3.innerHTML = lname;
td4.innerHTML = email;
td5.innerHTML = phoneNumber;
td6.innerHTML = country;
td7.innerHTML = nation;
trow.appendChild(td1);
trow.appendChild(td2);
trow.appendChild(td3);
trow.appendChild(td4);
trow.appendChild(td5);
trow.appendChild(td6);
trow.appendChild(td7);
tbody.appendChild(trow);
console.log("a");
}
function AddAllItemsToTable(TheAttendanct) {
attendantNumber = 0;
tbody.innerHTML = "";
TheAttendanct.forEach(element => {
AddItemToTable(element.FirstName, element.LastName, element.Email, element.PhoneNumber, element.Country, element.Nationality);
});
console.log("B");
}

async function GetAllData() {
const querySnapshot = await getDocs(collection(db, "attendants"));
var attendants = [];
querySnapshot.forEach(doc => {
attendants.push(doc.data());
});
AddAllItemsToTable(attendants);
}
window.onload = GetAllData;

已编辑

这是我的上传功能

async function UploadAttachment() {
var selectedFile = attachment.files[0];
var fileName = user.uid

const metaData = {
contentType: selectedFile.type
}

const storage = getStorage();
const storageRef = sRef(storage, "attachments/" + fileName)

const UploadTask = uploadBytesResumable(storageRef, selectedFile, metaData);

UploadTask.on('state-changed', (snapshot) => {
var uploadProgress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
persentage.innerHTML = "Upload" + uploadProgress + "%";
},(error) => {
alert('error: Image Not Uploaded')
},
()=>{
getDownloadURL(UploadTask.snapshot.ref).then((downloadUrl) => {
console.log(downloadUrl);
})
}
);
}

Answer 1

尝试检查它是否在此处返回数据

querySnapshot.forEach(doc => {
// Print data to console
console.log(doc.data());
attendants.push(doc.data());
});