首页 > 解决方案 > Angular - 使用 fs 读取 app 目录中的二进制图像文件?

问题描述

这应该很简单,但我遇到了一些麻烦。

我想从我的 Angular 应用程序的本地“资产”目录中读取一个 jpg 文件,并计算图像文件的哈希值。

我在访问实际文件时遇到了一些麻烦。通过查看各种资源,我想出了这个,并安装了

    const fs = require("fs");
    const crypto = require("crypto");
    const fileBuffer = fs.readFileSync(`assets/${`assetFile`}`)

    const hashSum = crypto.createHash('sha256');
    hashSum.update(fileBuffer);
    
    const hex = hashSum.digest('hex');
    console.log(hex);
    return hex.toString();

现在的问题是 fs.readFileSync 不起作用,如果我可以使用它来“fs”读取文件,我有点困惑。还是我应该使用 https 或其他东西,即使图像和代码或在同一台机器上?

标签: angular

解决方案


好吧,由于fs仅在后端可用,这里是使用 FileReader 的 Angular-Frontend-solution。

在 UI 中的某处放置一个按钮以打开文件对话框。该按钮应该调用此方法:

public loadFile(): void
{
    const input = document.createElement('input');
    input.type = 'file';
    input.style.display = 'none';

    input.onchange = (inputChangeEvent: any) =>
    {
        const file = inputChangeEvent.target.files[0];
        const reader = new FileReader();

        reader.addEventListener('loadend', () =>
        {
            const result = reader.result;

            // here goes your additional code for hashing

        });

        reader.readAsArrayBuffer(file);
    };
    input.click();
}

推荐阅读