Минутку… разве вы уже не делали подобную игру с названием статьи? Ну да.

Да, делал.

Живая демонстрация
Источник для микросервиса
Источник для демонстрации

Здесь будет рассмотрен немного более сложный аспект микрофронтенда (по крайней мере, на одной стороне этой транзакции), который принимает объект FormData для возможности загрузки файлов, затем использует пакет npm под названием busboy, который используется для «разбора входящих данных HTML формы», а также concat-stream для загрузки файлов через данные формы POST.

Эта конечная точка / сценарий использования включает в себя:

наш пользователь уже имеет контент в формате, с которым он привык работать .docx.
запрос на загрузку этого файла через HTML-форму
Загрузка файла в виде потока / tmp, чтобы не сохранять его (поскольку это лямбда, у нее нет возможности сохранять)
получение этого потокового содержимого и преобразование в HTML
отправка обратно пользователю

Процесс преобразования HTML в .docx очень прост и не слишком отличается от предыдущего примера htmlToMd, поэтому в этом посте мы сосредоточимся на «трудной проблеме».

new FormData

Знаете ли вы, что можно программно создавать и заполнять FormData так, как если бы они принимались через тег input? Я не знал, прежде чем написать это, но это имеет смысл. Все HTML-теги (обычно) являются просто ударами по JS API, к которым мы можем получить доступ или, по крайней мере, иметь некоторые параллели.

Вот источник, используемый в публичном демо, который использует new FormData для отображения тега input, обработки выбора файла, выдачи POST нашему микро и отображения ответного HTML.

  // docx to html
  docxToHtmlRender() {
    return html`
    <label>Upload Docx file to get HTML</label>
    <input type="file" id="upload" @change="${this.docxToHtmlUpload}" />
    <textarea id="response" rows="10" cols="50"></textarea>
    <h1>HTML that was in the file upload</h1>
    <div id="here"></div>
    `;
  }

  docxToHtmlUpload(event) {
    const files = event.target.files;
    const formData = new FormData();
    formData.append('upload', files[0]);
    MicroFrontendRegistry.call('@core/docxToHtml', formData, this.docxToHtmlResponse.bind(this));
  }

  docxToHtmlResponse(data) {
    console.log(data);
    this.shadowRoot.querySelector("#here").innerHTML = data.data.contents;
  }

Вход в полноэкранный режим Выход из полноэкранного режима

Время видео

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

htmlToDocx? Нет! docxToHtml! Как насчет того и другого?

new FormData

Время видео