Angular - 如何在没有 fs 的情况下检查文件是否存在

Question

因为

fs

自 Angular 6 以来似乎不再起作用了 我还没有找到检查文件是否存在的替代方法。 在我的特殊情况下，我必须检查资产文件夹中是否存在特定的图像文件，例如像这样的：

if (fileExists('path')) { doSomething(); }

我尝试安装 file-exists 包但这使用

const fs = require('fs')
const path = require('path')

这显然不受 Angular 7 支持。

有人可以帮忙吗？非常感谢。

Answer 1

谢谢你，西珀。是的，这就是我现在的管理方式。但我希望有一个更简单的单行函数来检查这一点。

这里是代码（它返回文件夹，而不是文件，所以我可以将它用于更多目的）：

getFolder(subFolder: string): Observable<string> {
    const folderPath = `assets/folder/${subFolder.toLocaleUpperCase()}`;
    return this.httpClient
      .get(`${folderPath}/file.png`, { observe: 'response', responseType: 'blob' })
      .pipe(
        map(response => {
          return folderPath;
        }),
        catchError(error => {
          return of('assets/folder/default');
        })
      );
  }

Answer 2

这是一个返回布尔值 Observable 的代码片段，用于判断给定 URL 处是否存在文件：

fileExists(url: string): Observable<boolean> {
    return this.httpClient.get(url)
        .pipe(
            map(response => {
                return true;
            }),
            catchError(error => {
                return of(false);
            })
        );
}

或者，同样的事情，但采用更简洁的单行格式：

public fileExists(url: string): Observable<boolean> {
    return this.httpClient.get(url).pipe(map(() => true), catchError(() => of(false)));
}

Answer 3

如果上述答案对您（像我一样）不起作用，请尝试此操作。如果图像不存在，它只会返回默认图像路径。

fileExists(id: number) {
    const folderPath = `../../assets/images/${id}.jpg`;

    this._http.get(folderPath, { responseType: 'text' }).toPromise().then(response => {
      this.imagePath = folderPath;
    }).catch(error => {
      return this.imagePath;
    });
}

然后在html中：

<img class="" src="{{imagePath}}" />

Answer 4

import { Injectable } from '@angular/core'
import { HttpClient, HttpErrorResponse } from '@angular/common/http'
import { Observable, of } from 'rxjs'
import { catchError, map } from 'rxjs/operators'

@Injectable({ providedIn: 'root' })
export class FileService {

  constructor(private http: HttpClient) {}

  fileExists(url: string): Observable<boolean> {
    return this.http.get(url).pipe(
      map(() => true),
      catchError((err: HttpErrorResponse) => {
        const success: boolean = err.status.toString().startsWith('2')
        return of(success)
      })
    )
  }
}