Angular & Spring Boot: проблема с именем файла

Question

когда я получаю файл из базы данных (mysql), имя файла выглядит так, будто он шифрует. поэтому моя проблема - показать реальное имя файла на onglet.

фотографии ниже, чтобы прояснить ситуацию.

это мой метод на Angular:

    GetById(id: number) {
        this.uploadService.getFile(id).subscribe((res) => {
          this.retrieveResonse = res;
          this.base64Data = this.retrieveResonse.fileContent;

    var blob = new Blob([this._base64ToArrayBuffer(this.base64Data)], {
              type: "application/pdf",
            });


            const url = URL.createObjectURL(blob);

            this.retrievedFile = window.open(url, this.retrieveResonse.fileName);
}

_base64ToArrayBuffer(base64) {
    const binary_string = window.atob(this.base64Data);
    const len = binary_string.length;
    const bytes = new Uint8Array(len);
    for (let i = 0; i < len; i++) {
      bytes[i] = binary_string.charCodeAt(i);
    }
    return bytes.buffer;
  }

Служба загрузки .ts

export class UploadFileService {
  private baseUrl = "http://localhost:8080/gp";
  OnUpload(selectedFile: File, tag: string, dep: string): Observable<any> {
    const uploadImageData = new FormData();
    uploadImageData.append("file", selectedFile, selectedFile.name);
    uploadImageData.append("tag", tag);
    uploadImageData.append("dep", dep);

    //Make a call to the Spring Boot Application to save the image
    return this.http.post("http://localhost:8080/gp/do", uploadImageData, {
      observe: "response",
    });
  }

шаблон, содержащий файлы

<div id="pricing-table" class="clear" data-aos="fade-right">
  <div class="sel">
    <div class="row">
      <div class="col" style="left: -160px;">
        <input
          type="text"
          placeholder="Search..."
          [(ngModel)]="SearchTag"
          (input)="Search()"
          style="margin: 20px;"
        />
        <div id="toggle" style="left: 450px;"></div>
      </div>
    </div>
  </div>

  <div
    class="plan"
    *ngFor="
      let file of filtered | paginate: { itemsPerPage: 3, currentPage: p }
    "
  >
    <h3></h3>

    <ul>
      <li><b>Name: </b> {{ file.nom }}</li>
      <li><b>Type: </b> {{ file.type }}</li>
      <li><b>Departement: </b>{{ file.departement }}</li>
      <li><b>Tag: </b>{{ file.tag }}</li>
      <button
        class="btn"
        style="background-color: #09c0a3;"
        (click)="GetById(file.id)"
      >
        Ouvrir
      </button>
      <button
        class="btn"
        style="background-color: #09c0a3;"
        (click)="Remember(file.id)"
      >
        Remember
      </button>
    </ul>
  </div>
</div>
<pagination-controls
  (pageChange)="onPageChange($event)"
  (pageBoundsCorrection)="onPageChange($event)"
  style="float: right;"
></pagination-controls>

, поэтому я думаю, что проблема в angular, поэтому я не получил никакого кода от бэкэнда. СПАСИБО, РЕБЯТА.

пример: я хочу открыть этот файл с именем "Cert20417610441"

Как только я его открыл, его имя изменилось на другое сложное имя

Answer 1

Странный URL происходит из этих строк:

const url = URL.createObjectURL(blob);

window.open(url, ...)

Вместо того, чтобы использовать сгенерированный на стороне клиента га sh, попробуйте, чтобы сервер возвращал идентификатор вновь загруженного файла всякий раз, когда вы загружаете файл.

Затем на странице списка, когда пользователь щелкает файл, он должен просто перенаправить на страницу сведений о файле, используя этот идентификатор.

пример: /files/ID_OF_THE_FILE_RETURNED_FROM_THE_SERVER

Наконец, на странице сведений вы просто читаете URL-адрес и получаете из него идентификатор. С помощью идентификатора вы отправляете запрос на сервер, чтобы получить все сведения о файле (включая имя файла), и отображаете их на странице.