IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> JavaScript知识库 -> vue/js通过计算 字符串 / 文件 sha1(SHA-1)值、sha256值等方法 -> 正文阅读

[JavaScript知识库]vue/js通过计算 字符串 / 文件 sha1(SHA-1)值、sha256值等方法

目录

1、对消息进行编码,然后计算其 SHA-256,并 记录内容长度:

2、转为十六进制字符串

?3、vue / js 前端代码获取文件的SHA-1的值

1、对消息进行编码,然后计算其 SHA-256,并 记录内容长度:

????????代码示例:

const content = '这是用来计算SHA-256值的长度的方法';

async function digestMessage(message) {
  const encoder = new TextEncoder();
  const data = encoder.encode(message);
  const hash = await crypto.subtle.digest('SHA-256', data);
  return hash;
}

digestMessage(content )
  .then(digestBuffer => console.log(digestBuffer.byteLength));

注意:如果想要计算SHA-1的值,直接将上述代码中 SHA-256替换为 SHA-1即可。其他同样操作

实际结果如下图:

2、转为十六进制字符串

代码示例:

const content2 = '这是用来计算SHA-256的字符串的方法';

async function digestMessage(message) {
  const msgUint8 = new TextEncoder().encode(message);                           // encode as (utf-8) Uint8Array
  const hashBuffer = await crypto.subtle.digest('SHA-256', msgUint8);           // hash the message
  const hashArray = Array.from(new Uint8Array(hashBuffer));                     // convert buffer to byte array
  const hashHex = hashArray.map(b => b.toString(16).padStart(2, '0')).join(''); // convert bytes to hex string
  return hashHex;
}

digestMessage(content2)
  .then(digestHex => console.log(digestHex));

注意:如果想要计算SHA-1的值,直接将上述代码中 SHA-256替换为 SHA-1即可。其他同样操作实际结果如下图:

?3、vue / js 前端代码获取文件的SHA-1的值


/**
 * 获取文件SHA-1的值
 * @params file 上传的 file 
 */
function getFileSha1 (file) {
    return new Promise((resolve) => {
        const fileReader = new FileReader();
        fileReader.readAsArrayBuffer(file); // 获取文件的ArrarBuffer
        fileReader.onload = e => {
            // console.log(e.target.result)) // 查看返回结果
            const SHA = getSha1(e.target.result);
            resolve(SHA);
        };
    });
}

/**
 * 获取文件SHA-1的值
 * @params data  读取文件的数据,ArrarBuffer格式
 */
async function getSha1(data) {
    // 读取文件时,直接将文件读取为Arryabuffer的形式。顾不需要进行 encode as (utf-8) Uint8Array
    // 读取字符串时则需要
    // const msgUint8 = new TextEncoder().encode(data);
    const hashBuffer = await crypto.subtle.digest('SHA-1', data);           // hash the message
    const hashArray = Array.from(new Uint8Array(hashBuffer));                     // convert buffer to byte array
    const hashHex = hashArray.map(b => b.toString(16).padStart(2, '0')).join(''); // convert bytes to hex string
    return hashHex;
}

// 由于文件读取处理为异步操作。顾调用时,可通过 async / await 来获取SHA-1的值

?前端获取SHA-1等值主要通过?crypto.subtle.digest(algorithm, data) 方法获取

参数
?????????algorithm:这可能是字符串或具有单个属性的对象,name即字符串。字符串命名要使用的散列函数。支持的值是:

? ???????"SHA-1"(但不要在加密应用程序中使用它)
? ??????"SHA-256"
????????"SHA-384"
????????"SHA-512".
????????data :? 一个ArrayBuffer或ArrayBufferView包含要消化的数据。

返回值
????????A Promise满足 ArrayBuffer包含摘要的 a?

参考文档:SubtleCrypto.digest() - Web APIs | MDN

  JavaScript知识库 最新文章
ES6的相关知识点
react 函数式组件 & react其他一些总结
Vue基础超详细
前端JS也可以连点成线(Vue中运用 AntVG6)
Vue事件处理的基本使用
Vue后台项目的记录 (一)
前后端分离vue跨域,devServer配置proxy代理
TypeScript
初识vuex
vue项目安装包指令收集
上一篇文章      下一篇文章      查看所有文章
加:2022-05-14 09:51:45  更:2022-05-14 09:53:59 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年11日历 -2024/11/23 19:45:26-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码