Angular 如何在上传后从Firebase获取Url文件以返回发送到后端的Url字符串并保存数据库My SQL

我是Angular的新成员

我正在使用以下技术进行项目：

• 后端：弹簧靴

• 前端：角度

• 数据库：

*保存信息类型字符串（文本，…）的我的SQL

• FireBase保存infor类型文件（mp3、pdf、png…vv）

我把文件从FireBase推到Angular

但是，我不想直接从Firebase获取文件

目标：我想从Fire Base获取url文件，将请求发送到后端，并将url文件保存在我的SQL中

然后，在绑定数据（包括文本和文件）时，将使用后端和我的SQL

那么，你能帮我从Fire Base获取Url文件吗

非常感谢你

首先，我让对象上传文件。 第二，我使服务上传文件。（Pushfile，getfile） 第三，我编写component.ts（结构中的DI服务） -我使变量为fileupload:any[]=[] -我使用getfile方法调用服务。 -将列表文件保存到文件上载。 -然后，我想从fileupload获取url，但不是完美的。 第四，我编写component.html

@pareshgami 我的项目服务使用FireBase制作6种方法：

推送文件

保存文件

获取文件

删除文件

删除文件数据库

删除文件存储

这是推送文件的代码

pushFileToStorage(fileUpload: FileUpload, progress: { percentage: number }) {
const storageRef = firebase.storage().ref();
const uploadTask = storageRef
  .child(`${this.basePathFile}/${fileUpload.file.name}`)
  .put(fileUpload.file);

uploadTask.on(firebase.storage.TaskEvent.STATE_CHANGED,
  (snapshot) => {
                              const snap = snapshot as firebase.storage.UploadTaskSnapshot;
                              progress.percentage = Math.round((snap.bytesTransferred / snap.totalBytes) * 100);},
          (error) => { console.log(error); },
  () => {
              uploadTask.snapshot.ref.getDownloadURL().then(downloadURL => {
                console.log('File available at', downloadURL);
                fileUpload.url = downloadURL;
                fileUpload.name = fileUpload.file.name;
                this.saveFileData(fileUpload); });
  }
);

 getFileUploads(numberItems): AngularFireList<FileUpload> {
    return this.db.list(this.basePathFile, ref => ref.limitToLast(numberItems));

}

这是获取文件

pushFileToStorage(fileUpload: FileUpload, progress: { percentage: number }) {
const storageRef = firebase.storage().ref();
const uploadTask = storageRef
  .child(`${this.basePathFile}/${fileUpload.file.name}`)
  .put(fileUpload.file);

uploadTask.on(firebase.storage.TaskEvent.STATE_CHANGED,
  (snapshot) => {
                              const snap = snapshot as firebase.storage.UploadTaskSnapshot;
                              progress.percentage = Math.round((snap.bytesTransferred / snap.totalBytes) * 100);},
          (error) => { console.log(error); },
  () => {
              uploadTask.snapshot.ref.getDownloadURL().then(downloadURL => {
                console.log('File available at', downloadURL);
                fileUpload.url = downloadURL;
                fileUpload.name = fileUpload.file.name;
                this.saveFileData(fileUpload); });
  }
);

 getFileUploads(numberItems): AngularFireList<FileUpload> {
    return this.db.list(this.basePathFile, ref => ref.limitToLast(numberItems));

getFileUploads（numberItems）：AngularFireList{
返回这个.db.list（this.basePathFile，ref=>ref.limitToLast（numberItems））；

}@Paresh-Gami 我的项目服务使用FireBase制作6种方法：

推送文件

保存文件

获取文件

删除文件

删除文件数据库

删除文件存储

这是推送文件的代码

pushFileToStorage(fileUpload: FileUpload, progress: { percentage: number }) {
const storageRef = firebase.storage().ref();
const uploadTask = storageRef
  .child(`${this.basePathFile}/${fileUpload.file.name}`)
  .put(fileUpload.file);

uploadTask.on(firebase.storage.TaskEvent.STATE_CHANGED,
  (snapshot) => {
                              const snap = snapshot as firebase.storage.UploadTaskSnapshot;
                              progress.percentage = Math.round((snap.bytesTransferred / snap.totalBytes) * 100);},
          (error) => { console.log(error); },
  () => {
              uploadTask.snapshot.ref.getDownloadURL().then(downloadURL => {
                console.log('File available at', downloadURL);
                fileUpload.url = downloadURL;
                fileUpload.name = fileUpload.file.name;
                this.saveFileData(fileUpload); });
  }
);

 getFileUploads(numberItems): AngularFireList<FileUpload> {
    return this.db.list(this.basePathFile, ref => ref.limitToLast(numberItems));

}

这是获取文件

pushFileToStorage(fileUpload: FileUpload, progress: { percentage: number }) {
const storageRef = firebase.storage().ref();
const uploadTask = storageRef
  .child(`${this.basePathFile}/${fileUpload.file.name}`)
  .put(fileUpload.file);

uploadTask.on(firebase.storage.TaskEvent.STATE_CHANGED,
  (snapshot) => {
                              const snap = snapshot as firebase.storage.UploadTaskSnapshot;
                              progress.percentage = Math.round((snap.bytesTransferred / snap.totalBytes) * 100);},
          (error) => { console.log(error); },
  () => {
              uploadTask.snapshot.ref.getDownloadURL().then(downloadURL => {
                console.log('File available at', downloadURL);
                fileUpload.url = downloadURL;
                fileUpload.name = fileUpload.file.name;
                this.saveFileData(fileUpload); });
  }
);

 getFileUploads(numberItems): AngularFireList<FileUpload> {
    return this.db.list(this.basePathFile, ref => ref.limitToLast(numberItems));

getFileUploads（numberItems）：AngularFireList{
返回这个.db.list（this.basePathFile，ref=>ref.limitToLast（numberItems））；

---

}

您在firebase中使用哪种方法上传文件？@PareshGami我无法在此发表评论。我在下面的帖子里对你发表了评论。非常感谢您使用哪种方法在firebase中上传文件？@PareshGami我无法在此发表评论。我在下面的帖子里对你发表了评论。多谢各位