当前位置: 首页 > 知识库问答 >
问题:

适用于 Firebase 的云存储限制(合并)多个文件上传的大小

端木飞
2023-03-14

在我的Angular应用程序中,我有一个带有文件上传输入的联系人表单。如果合并的文件超过20 MB,则前端的文件上传输入不允许发送联系表单。Firebase在云存储中有没有办法实现同样的逻辑?目前我只能限制20 MB,但对于每个文件,即如果有人将上传10个文件,每个19 MB的她/他将无法发送表单,但文件将被发送到我的无服务器后端,这是我不想要的。

contact.component.html

<mat-form-field>
  <!--
    Accept only files in the following format: .doc, .docx, .jpg, .jpeg, .pdf, .png, .xls, .xlsx. However, this is easy to bypass, Cloud Storage rules has been set up on the back-end side.
  -->
  <ngx-mat-file-input
    [accept]="[
      '.doc',
      '.docx',
      '.jpg',
      '.jpeg',
      '.pdf',
      '.png',
      '.xls',
      '.xlsx'
    ]"
    (change)="uploadFile($event)"
    formControlName="fileUploader"
    multiple
    aria-label="Here you can add additional files about your project, which can be helpeful for us."
    placeholder="Additional files"
    title="Additional files"
    type="file"
  >
  </ngx-mat-file-input>
  <mat-icon matSuffix>folder</mat-icon>
  <mat-hint
    >Accepted formats: DOC, DOCX, JPG, JPEG, PDF, PNG, XLS and XLSX,
    maximum files upload size: 20 MB.
  </mat-hint>
  <!--
    Non-null assertion operators are required to let know the compiler that this value is not empty and exists.
  -->
  <mat-error
    *ngIf="contactForm.get('fileUploader')!.hasError('maxContentSize')"
  >
    This size is too large,
    <strong
      >maximum acceptable upload size is
      {{
        contactForm.get('fileUploader')?.getError('maxContentSize')
          .maxSize | byteFormat
      }}</strong
    >
    (uploaded size:
    {{
      contactForm.get('fileUploader')?.getError('maxContentSize')
        .actualSize | byteFormat
    }}).
  </mat-error>
</mat-form-field>

contact.component.ts (size validator)

public maxFileSize = 20971520;
public contactForm: FormGroup = this.formBuilder.group({
    fileUploader: [
      '',
      Validators.compose([
        FileValidator.maxContentSize(this.maxFileSize),
        Validators.maxLength(512),
        Validators.minLength(2)
      ])
    ].toString()
})

contact.component.ts(文件上传程序)

/**
   * @description Upload additional files to Cloud Firestore and get URL to the files.
   * @param {event} - object of sent files.
   * @returns {void}
   */
  public uploadFile(event: any): void {
    // Iterate through all uploaded files.
    for (let i = 0; i < event.target.files.length; i++) {
      const randomId = Math.random()
        .toString(36)
        .substring(2); // Create random ID, so the same file names can be uploaded to Cloud Firestore.

      const file = event.target.files[i]; // Get each uploaded file.

      // Get file reference.
      const fileRef: AngularFireStorageReference = this.angularFireStorage.ref(
        randomId
      );

      // Create upload task.
      const task: AngularFireUploadTask = this.angularFireStorage.upload(
        randomId,
        file
      );

      // Upload file to Cloud Firestore.
      task
        .snapshotChanges()
        .pipe(
          finalize(() => {
            fileRef.getDownloadURL().subscribe((downloadURL: string) => {
              this.angularFirestore
                .collection(process.env.FIRESTORE_COLLECTION_FILES!) // Non-null assertion operator is required to let know the compiler that this value is not empty and exists.
                .add({ downloadURL: downloadURL });
              this.downloadURL.push(downloadURL);
            });
          }),
          catchError((error: any) => {
            return throwError(error);
          })
        )
        .subscribe();
    }
  }

存储.规则

rules_version = '2';
service firebase.storage {
  match /b/{bucket}/o {
    match /{allPaths=**} {
        allow read; // Required in order to send this as attachment.
      // Allow write files Firebase Storage, only if:
      // 1) File is no more than 20MB
      // 2) Content type is in one of the following formats: .doc, .docx, .jpg, .jpeg, .pdf, .png, .xls, .xlsx.
      allow write: if request.resource.size <= 20 * 1024 * 1024
        && (request.resource.contentType.matches('application/msword')
        || request.resource.contentType.matches('application/vnd.openxmlformats-officedocument.wordprocessingml.document')
        || request.resource.contentType.matches('image/jpg')
        || request.resource.contentType.matches('image/jpeg')
        || request.resource.contentType.matches('application/pdf')
                || request.resource.contentType.matches('image/png')
        || request.resource.contentType.matches('application/vnd.ms-excel')
        || request.resource.contentType.matches('application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'))
    }
  }
}

共有1个答案

张成济
2023-03-14

Firebase云存储安全规则的限制分别适用于每个文件/对象,而不适用于整个操作。在云存储规则的上下文中,这种类型的限制也没有什么意义,因为用户可以启动另一个操作来上传附加文件。

需要考虑的一些选项:

> < li>

如果您硬编码用户上传的文件名(这也意味着您将限制他们可以上传的文件数量),并为每个特定用户创建文件文件夹,您可以确定用户文件夹中所有文件的总数,从而以这种方式限制总数。

或者,您可以在客户机上将所有文件压缩在一起,然后上传生成的归档文件。在这种情况下,安全规则可以强制该文件的最大大小。

当然,在这两种情况下,您都可以包含客户端JavaScript代码来检查组合文件的最大大小。恶意用户可以很容易地绕过这个JavaScript,但是大多数用户并没有恶意,他们会感谢您通过阻止上传来节省他们的带宽,上传无论如何都会被拒绝。

您还可以使用 HTTPS 云函数作为上传目标,然后仅在文件符合您的要求时才将文件传递到 Cloud Storage。

或者,您可以使用云功能,该功能用户上传时触发,并在更改后为该用户验证文件。在这一点上,你可以纠正这种情况。

许多这样的场景需要(或者更好地工作)你有一个结构,在这个结构中你可以看到哪个用户上传了每个文件。有关此结构的更多信息,请参见用户私有文件的文档。

 类似资料:
  • 什么是 Firebase 存储上传文件大小限制?我在网站上找不到该信息。

  • 如何添加规则来限制用户可以使用的最大存储空间大小?当前的限制了用户可以上传的文件的大小,但没有限制用户正在上传的文件夹/存储桶的大小。我希望对用户可以上传的所有内容设置一个限制,例如50 MB。 更新: 为了重新定义这个问题,假设用户已经上传了5张大小为10MB的图像,总共是50MB。现在我想限制用户上传更多文件,因为已经达到了最大存储桶大小(在我的例子中为50MB)。可能有两个文件,每个20 M

  • 有没有办法添加Firebase 3存储安全规则来限制单个认证用户可以上传多少个文件?例如每个用户100个文件。 或者更新Firebase数据库文件数,一旦有人将文件上传到存储器,然后验证文件数。 试图解决问题,如何处理用户上传无限量数据到存储器的能力。

  • 我正在使用AngularFire2成功将图像上传到Firebase Storage。 我有以下上传代码。 我想解决几个问题。 如何设置文件大小限制?这意味着我希望用户能够上传小于10mb的文件。 如何限制文件编号?这意味着我希望一个用户只能上传3个文件。 如果没有firebase服务器规模的解决方案,请推荐一些客户端规模的解决方案。 谢谢

  • Firebase Admin SDK文档清楚地说明,服务帐户对存储帐户具有完全的范围控制,但由于传输令牌源为nil,因此正确引导凭据似乎有些错误。

  • 本文向大家介绍php限制上传文件类型并保存上传文件的方法,包括了php限制上传文件类型并保存上传文件的方法的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了php限制上传文件类型并保存上传文件的方法。分享给大家供大家参考。具体如下: 下面的代码演示了php中如何获取用户上传的文件,并限制文件类型的一般图片文件,最后保存到服务器 希望本文所述对大家的php程序设计有所帮助。