React 图片转MD5

背景

项目需要支持对img或者ico的图标检索，服务端又不想把每次上传的图片存储在服务器上，想要通过md5对比

环境依赖

• Ant Design(UI库)
• Spark-md5(MD5 算法jS依赖)

实现

import { UploadOutlined } from "@ant-design/icons";
import type { UploadProps } from "antd";
import { Button, Upload } from "antd";
import SparkMD5 from "spark-md5";

export default function HomePage() {
  const props: UploadProps = {
    beforeUpload: (file) => {
      const aBlob = new Blob([file]); // 1 转Blob对象
      const reader = new FileReader(); // 2 新建 FileReader 对象,用于操作文件
      reader.onload = (e) => {
        // 4 处理load事件。该事件在读取操作完成时触发。
        var spark = new SparkMD5.ArrayBuffer();
        spark.append(e.target.result);
        console.log("md5:", spark.end());
      };
      reader.onerror = (e) => {}; // 5 处理error事件。该事件在读取操作发生错误时触发。
      reader.readAsArrayBuffer(aBlob); // 3 开始读取指定的 Blob中的内容，一旦完成，result 属性中保存的将是被读取文件的 ArrayBuffer 数据对象。
      return false;
    },
    onChange: (info) => {
      console.log(info.fileList);
    },
  };
  return (
    <div>
      <Upload {...props}>
        <Button icon={<UploadOutlined />}>Upload png only</Button>
      </Upload>
    </div>
  );
}