1

我在我的项目中使用了 Angular、Ionic 和 Firebase。我使用 Uploadcare 将照片上传和检索到应用程序。我可以删除数据库中的文件，但问题是实际图像仍上传到 UploadCare 存储中。

这是我的代码：

organization.service.ts - 这是我在 Firebase 和 UploadCare 中连接应用程序的地方

我得到的回应：

从服务： 来自服务的响应。

从page.ts： 来自 page.ts 的响应

更新

网络响应：

这是我在删除带有图像的项目时的网络活动。 在此处输入图像描述

组织服务.ts

  deleteOrg(orgId: string){
    return this.http
    .delete(`https://db-student-portal-default-rtdb.firebaseio.com/add-organization/${orgId}.json`)
    .pipe(switchMap(() => {
      return this.allOrg;
    }),
    take(1), 
    tap(orgs => {
      this.organization.next(orgs.filter(o => o.id !== orgId))
    })
    );
  }

  //This is the function to delete the image in UploadCare
  deleteImage(image: any){

    let httpHeader = new HttpHeaders();
    
    httpHeader.set('Authorization', `Uploadcare.Simple ${PUB_KEY}:${SEC_KEY}`);
    httpHeader.set('Accept', 'application/vnd.uploadcare-v0.5+json');

    this.http.delete(`https://api.uploadcare.com/files/${image}/`, {headers: httpHeader});
  }

组织页面.ts

  onDeleteOrg(){
    this.alertCtrl.create({
      header: 'Delete ' + this.loadedOrg.orgName,
      message: 'Do you want to delete this organization?',
      buttons: [
      {
        text: 'Cancel',
        role: 'cancel'
      },
      {
        text: 'Delete',
        handler: () => {
          this.loadingCtrl.create({
            message: 'Deleting Organization: ' + this.loadedOrg.orgName,
            spinner: 'circular'
          }).then(loadEl => {
            loadEl.present();
            
            //THIS IS WHERE THE DELETION HAPPEN (in the Firebase)
            this.orgService.deleteOrg(this.loadedOrg.id).subscribe(() => {
           //THIS IS WHERE THE DELETION HAPPEN (in the UploadCare)
              this.orgService.deleteImage(this.loadedOrg.imageUrl.replace('https://ucarecdn.com/', ''));
              loadEl.dismiss();
              this.router.navigate(['/homepage']);
            });
          });
        }
      }]
    }).then(alertEl => {
        alertEl.present();
    });

  }
4

2 回答 2

0

根据文档，UploadCare 的单个文件删除只需要文件的 UUID，即delete /files/:uuid（参见https://uploadcare.com/docs/rest-api/accessing-files/#delete-file）。

据我所知，您正在尝试将整个文件数据传递给 API，这在语义上无论如何都不正确（它使用 uuid 来匹配正确的文件）。

使您的代码适应类似的东西

let httpHeaders = new HttpHeaders();
httpHeaders.set('Authorization', 'Uploadcare.Simple');
httpHeaders.set('UPLOADCARE_PUB_KEY', '6b*****************7');
this.httpClient.delete(`https://api.uploadcare.com/files/${uuid}/`, { headers: httpHeaders })

应该做的伎俩。

编辑：我觉得需要更多解释。你试图用你的代码做的是调用 UploadCare 的delete端点。根据文档，该端点需要被删除文件的uuid，即/files/:uuid以及Authorization和UPLOADCARE_PUB_KEY标头。为此，您使用HttpHeaders.

在您的版本中，您将该数据作为FormData对象的一部分传递（请参阅文档），我想这应该会引发 HTTP404 错误。

于 2021-01-15T11:19:52.880 回答
0

Simple授权方案要求您提供公共和秘密 API 密钥（请参阅Uploadcare REST API 参考）。你应该这样修改你的代码

let httpHeaders = new HttpHeaders();
httpHeaders.set('Authorization', `Uploadcare.Simple ${YOUR_PUBLIC_KEY}:${YOUR_SECRET_KEY}`);
httpHeaders.set('Accept', 'application/vnd.uploadcare-v0.5+json');
this.httpClient.delete(`https://api.uploadcare.com/files/${uuid}/`, { headers: httpHeaders });

请注意，在前端实现文件删除逻辑是不安全的，不推荐使用，因为它会暴露您的密钥。您应该在您的应用程序的后端实现它，以便您的应用程序的用户无法访问包含密钥的请求详细信息，或使用基于令牌的Uploadcare 身份验证方案。

于 2021-01-15T12:54:17.230 回答