Как прочитать бинарный файл в браузере, так же как с помощью fs?

Question

[ascold2013]

Здравствуйте!
Проблема обнаружилась в следующем моменте - мне нужно подписать файл в браузере, и верифицировать подпись на сервере, т.е в браузере и на сервере нужно прочитать файл одинаково. На сервере все просто:
const fileDocument = fs.readFileSync(pathToFile)
И получаем вот такой буфер

<Buffer 25 50 44 46 2d 31 2e 33 0d 0a 25 e2 e3 cf d3 0d 0a 34 20 30 20 6f 62 6a 0d 0a 3c 3c 0d 0a 2f 54 79 70 65 20 2f 50 61 67 65 0d 0a 2f 50 61 72 65 6e 74 ... >

Проблема в том, как мне в браузере сделать так же. Что попробовал я:

Api.documentsApi
    .getFileContent(context.state.document.versions[0].file,
         { ...store.getters['headerToken'], responseType: 'blob' })
          .then(blob => {
            console.log(blob)
            // read file content
            let fileContent = ''
            const fr = new FileReader()
            fr.readAsArrayBuffer(blob)
            fr.onload = (file) => { fileContent = file.target.result }

1. Запрашиваю с сервера нужный мне блоб файла
2. С помощью FileReader читаю его как буфер (вроде то же что и в фс?)
3. и... получаю в консоль пустую строку (fileContent после всего этого - пустая строка)

Как мне получить такой же результат, как и в fs на сервере? Не создавать же временный файл в браузере

Answer 1

[Александр]

onload вызывается асинхронно.

const reader = new FileReader();
reader.onload = event => {
    let fileContent = event.target.result;
    console.log(fileContent);
}
reader.readAsArrayBuffer(blob);

Comments

[ascold2013]

Именно так и сделал:

return Api.documentsApi
          .getFileContent(context.state.document.versions[0].file,
            { ...store.getters['headerToken'], responseType: 'blob' })
          .then(blob => {
            // read file content
            return new Promise((resolve, reject) => {
              const fr = new FileReader()
              fr.onload = function (e) {
                fileContent = e.target.result
                console.log(fileContent)
                resolve(fileContent)
              }
              fr.readAsArrayBuffer(blob)
            })
          })
...

Возвращает пустой обьект: ArrayBuffer(184738) {}

[ascold2013]

Вот этот код рабочий. нужно было преобразовать в массив

fr.onload = function (e) {
                fileContent = new Uint8Array(e.target.result)
                console.log(fileContent)
                resolve(fileContent)
              }
              fr.readAsArrayBuffer(blob)