131 lines
3.5 KiB
Vue
131 lines
3.5 KiB
Vue
<script setup>
|
||
import { NButton, NSpace, NIcon } from "naive-ui";
|
||
import PlayCircle from '@/assets/svgs/PlayCircle.svg'
|
||
import {ref} from 'vue'
|
||
import sparkMD from 'spark-md5'
|
||
import CryptoJS from 'crypto-js';
|
||
import md5 from 'crypto-js/md5';
|
||
import sha256 from 'crypto-js/sha256';
|
||
import { sha256 as jsSha256, sha224 } from 'js-sha256';
|
||
import { collapseLight } from 'naive-ui/lib/collapse/styles';
|
||
|
||
const showEditor = ref(false) //是否显示编辑框
|
||
|
||
const edit = () => {
|
||
showEditor.value = true
|
||
console.log('调用edit方法。')
|
||
}
|
||
|
||
const fileChange = (e) => {
|
||
let file = e.target.files[0];
|
||
let fileReader = new FileReader()
|
||
fileReader.readAsArrayBuffer(file);
|
||
fileReader.onload = e => {
|
||
// const s_md5 = sparkMD.hashBinary(e.target.result);
|
||
// console.log(s_md5, sparkMD.hashBinary('1111'));
|
||
// const c_md5 = md5(e.target.result)
|
||
|
||
// var wordArray = CryptoJS.lib.WordArray.create(fileReader.result);
|
||
// let c_sha256 = sha256(wordArray)
|
||
// console.log(c_sha256.toString())
|
||
let s_sha256 = jsSha256(e.target.result)
|
||
console.log(s_sha256)
|
||
// let hash = CryptoJS.SHA256(wordArray).toString();
|
||
// console.log(hash)
|
||
|
||
// //将读取结果：文件数据类型：ArrayBuffer 转化 为wordArray格式
|
||
// var wordArray = CryptoJS.lib.WordArray.create(fileReader.result);
|
||
// // //直接调用SHA256()并转化得到十六进制字符串（也就是我们要的SHA256）
|
||
// var hash = CryptoJS.SHA256(wordArray).toString();
|
||
// console.log(hash)
|
||
}
|
||
|
||
// let files = e.target.files[0];
|
||
// //生成实例
|
||
// let fileReads = new FileReader();
|
||
// //开始读取文件
|
||
// fileReads.readAsArrayBuffer(files);
|
||
// //读取回调
|
||
// fileReads.onload=function(){
|
||
// //将读取结果：文件数据类型：ArrayBuffer 转化 为wordArray格式
|
||
// var wordArray = CryptoJS.lib.WordArray.create(fileReads.result);
|
||
// //直接调用SHA256()并转化得到十六进制字符串（也就是我们要的SHA256）
|
||
// var hash = CryptoJS.SHA256(wordArray).toString();
|
||
// console.log(hash)
|
||
// }
|
||
|
||
}
|
||
|
||
</script>
|
||
<template>
|
||
<!-- <NSpace>
|
||
<NButton>
|
||
<template #icon>
|
||
<n-icon>
|
||
<PlayCircle/>
|
||
</n-icon>
|
||
</template>
|
||
NIcon 按钮
|
||
</NButton>
|
||
<NButton>
|
||
<template #icon>
|
||
<n-icon>
|
||
<svg-icon name="PlayCircle"></svg-icon>
|
||
</n-icon>
|
||
</template>
|
||
svg-sprite-loader 按钮
|
||
</NButton>
|
||
<NButton text style="font-size: 40px">
|
||
<n-icon>
|
||
<svg-icon name="Dots" />
|
||
</n-icon>
|
||
svg-sprite-loader 按钮
|
||
</NButton>
|
||
<NButton>
|
||
<template #icon>
|
||
<n-icon>
|
||
<svg-icon name="PlayCircle"></svg-icon>
|
||
</n-icon>
|
||
</template>
|
||
svg-sprite-loader 按钮
|
||
</NButton>
|
||
</NSpace> -->
|
||
<n-space>
|
||
<n-button @click="edit">
|
||
新增
|
||
</n-button>
|
||
<n-button>
|
||
编辑
|
||
</n-button>
|
||
<n-button>
|
||
保存
|
||
</n-button>
|
||
</n-space>
|
||
<div class="edit" v-show="showEditor">
|
||
<div class="title">标题哈啊哈</div>
|
||
<div class="content">
|
||
Content 编辑内容
|
||
</div>
|
||
<div class="footer">
|
||
Footer 尾部
|
||
</div>
|
||
</div>
|
||
<input type="file" id="file" @change="fileChange">
|
||
|
||
<div class="max-w-sm my-3 mx-auto hover:bg-purple-900 hover:text-white hover:cursor-pointer
|
||
border-gray-100 border px-2 py-3
|
||
text-xs bg-white
|
||
rounded-md shadow-md">
|
||
这是一个测试
|
||
</div>
|
||
|
||
</template>
|
||
|
||
<script>
|
||
export default {};
|
||
</script>
|
||
|
||
<style lang="less" scoped>
|
||
|
||
</style>>
|