添加chat功能
This commit is contained in:
539943419 committed
1 parent
08e7820f37
commit
127f58bd36
13 files changed
+661
-218
No files matched your search
@@ -0,0 +1,266 @@
|
||||
<template>
|
||||
<div>
|
||||
<n-upload
|
||||
ref="uploadRef"
|
||||
:default-upload="false"
|
||||
multiple
|
||||
:custom-request="customRequest"
|
||||
@before-upload="beforeUpload"
|
||||
>
|
||||
<n-upload-dragger>
|
||||
<!-- <div style="margin-bottom: 12px">
|
||||
<n-icon size="48" :depth="3"></n-icon>
|
||||
</div>-->
|
||||
<n-text style="font-size: 16px;user-select: none;">点击此处或者拖动文件到该区域来上传</n-text>
|
||||
<n-p depth="3" style="margin: 8px 0 0 0;user-select: none;">
|
||||
最大支持200MB大小文件，其实只是懒得做分片上传而已
|
||||
<br />虽然理论上没有人有能力审查你上传的东西
|
||||
<br />反正没人用写这么多干什么。。。
|
||||
</n-p>
|
||||
</n-upload-dragger>
|
||||
</n-upload>
|
||||
|
||||
<n-flex justify="end" style="margin: 10px 0;position:relative">
|
||||
<n-input-number v-model:value="downloadCredit" placeholder="可下载次数,默认无限" clearable :min="1" :max="2147483647" style="width:max-content"/>
|
||||
<n-button type="primary" @click="clickUpload">开始上传</n-button>
|
||||
</n-flex>
|
||||
<n-data-table
|
||||
:columns="columns"
|
||||
:data="file_Code_Map"
|
||||
:row-props="rowProps"
|
||||
:max-height="250"
|
||||
:bordered="false"
|
||||
:single-line="false"
|
||||
style="user-select: none;"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted } from "vue";
|
||||
// import aesjs from "aes-js";
|
||||
// import { Base64 } from "js-base64";
|
||||
import { useMessage, useNotification } from "naive-ui";
|
||||
import useClipboard from "vue-clipboard3";
|
||||
import { useSettingStore } from "@/pinia/store";
|
||||
// import { sm4 } from 'sm-crypto'
|
||||
import {NUpload,NUploadDragger,NText,NP,NFlex,NDataTable,NButton,NInputNumber} from 'naive-ui'
|
||||
import {encrypt,encryptString,generateKey} from '../func/upload'
|
||||
|
||||
const setting = useSettingStore();
|
||||
const { toClipboard } = useClipboard();
|
||||
const message = useMessage();
|
||||
const notification = useNotification();
|
||||
|
||||
|
||||
// 服务端端口
|
||||
const serverPort = setting.serverPort;
|
||||
|
||||
// console.log(activeFuction,activeKeyButtons)
|
||||
// var charMap = ""
|
||||
// for(let i of setting.activeKeyMap){
|
||||
// if(i === 'A-Z'){
|
||||
// charMap = charMap + 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'
|
||||
// }else if(i === "a-z"){
|
||||
// charMap = charMap + 'abcdefghijklmnopqrstuvwxyz'
|
||||
// }else if(i === '0-9'){
|
||||
// charMap = charMap + '0123456789'
|
||||
// }
|
||||
// }
|
||||
// // 生成密钥
|
||||
// const generateKey = function() {
|
||||
// if(setting.activeFuction === "不加密"){
|
||||
// return ''
|
||||
// }
|
||||
// var returnStr = "",
|
||||
// length = setting.activeFuction === "AES128" ? 16 : 32
|
||||
// // charMap = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
|
||||
|
||||
// for (var i = 0; i < length; i++) {
|
||||
// var index = Math.round(Math.random() * charMap.length);
|
||||
// returnStr += charMap.substring(index, index + 1);
|
||||
// }
|
||||
// return returnStr;
|
||||
// };
|
||||
|
||||
// 上传文件用
|
||||
const uploadRef = ref(null);
|
||||
|
||||
// 分享码可用次数
|
||||
const downloadCredit = ref(null);
|
||||
|
||||
var file_Code_Map = ref([]);
|
||||
|
||||
var uploadProcess = ref(0);
|
||||
|
||||
|
||||
const baseUrl =
|
||||
location.protocol + "//" + location.hostname + ":" + serverPort + "/";
|
||||
|
||||
|
||||
// const blob2Uint8Array = function(blob) {
|
||||
// return new Promise((resolve, reject) => {
|
||||
// let reader = new FileReader();
|
||||
// reader.readAsArrayBuffer(blob);
|
||||
// reader.onload = function() {
|
||||
// let buffer = reader.result;
|
||||
// let uint8array = new Uint8Array(buffer);
|
||||
// resolve(uint8array);
|
||||
// };
|
||||
// reader.onerror = function() {
|
||||
// reject(reader.error);
|
||||
// };
|
||||
// });
|
||||
// };
|
||||
// // 包含AES128和AES256
|
||||
// const AES = (key,data)=>{
|
||||
// key = aesjs.utils.utf8.toBytes(key);
|
||||
// var aesCtr = new aesjs.ModeOfOperation.ctr(key, new aesjs.Counter(5));
|
||||
// var encryptedBytes = aesCtr.encrypt(data);
|
||||
// return encryptedBytes;
|
||||
// }
|
||||
// const SM4 = (key,data)=>{
|
||||
// // console.log(key)
|
||||
// var encryptedBytes = sm4.encrypt(data,key,{padding: 'pkcs#7',output:'array'});
|
||||
// // console.log(encryptedBytes, sm4.decrypt(encryptedBytes, key,{output:'array'}))
|
||||
// return new Uint8Array(encryptedBytes);
|
||||
// }
|
||||
// const encrypt = (key, data, fileName) => {
|
||||
// return blob2Uint8Array(data).then(data => {
|
||||
// let encrypted_data = null
|
||||
// if(setting.activeFuction === "不加密"){
|
||||
// encrypted_data = data
|
||||
// }else if(setting.activeFuction != "SM4"){
|
||||
// message.info(`开始加密${fileName}`);
|
||||
// encrypted_data = AES(key,data)
|
||||
// message.info(`${fileName}加密完成`);
|
||||
// }else{
|
||||
// message.info(`开始加密${fileName}`);
|
||||
// encrypted_data = SM4(key,data)
|
||||
// message.info(`${fileName}加密完成`);
|
||||
// }
|
||||
// return encrypted_data
|
||||
// });
|
||||
// };
|
||||
// const encryptString = (key, str) => {
|
||||
// // console.log(key)
|
||||
// if(setting.activeFuction === "不加密"){
|
||||
// return sm4.encrypt(str, 'miaospringmiaospringmiaospringao')
|
||||
// }else if(setting.activeFuction !== "SM4"){
|
||||
// key = aesjs.utils.utf8.toBytes(key);
|
||||
// var data = aesjs.utils.utf8.toBytes(str);
|
||||
// var aesCtr = new aesjs.ModeOfOperation.ctr(key, new aesjs.Counter(5));
|
||||
// var encryptedBytes = aesCtr.encrypt(data);
|
||||
// return Base64.encode(encryptedBytes);
|
||||
// }else{
|
||||
// return sm4.encrypt(str, key)
|
||||
// }
|
||||
// };
|
||||
|
||||
const clickUpload = function(){
|
||||
// for(let i of uploadRef.value)console.log(i)
|
||||
// console.log(uploadRef.value)
|
||||
uploadRef.value.submit();
|
||||
}
|
||||
|
||||
const beforeUpload = async function(data) {
|
||||
// console.log(data.file.file.size)
|
||||
if (data.file.file.size > 200 * 1024 * 1024) {
|
||||
message.error(`${data.file.file.name}的大小超过限制，无法上传`);
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
};
|
||||
|
||||
const customRequest = ({
|
||||
file,
|
||||
data,
|
||||
headers,
|
||||
withCredentials,
|
||||
action,
|
||||
onFinish,
|
||||
onError,
|
||||
onProgress
|
||||
}) => {
|
||||
file = file.file;
|
||||
var fileName = file.name;
|
||||
const key = generateKey(setting);
|
||||
const encryptedFileName = encryptString(key, fileName, setting);
|
||||
var f = new Blob([file]);
|
||||
encrypt(key, f, fileName, setting, message).then(data => {
|
||||
message.info(`开始上传${fileName}`);
|
||||
const params = {
|
||||
fileName: encryptedFileName,
|
||||
downloadCredit:downloadCredit.value == null ? -1 : downloadCredit.value
|
||||
};
|
||||
const xhr = new XMLHttpRequest();
|
||||
xhr.upload.addEventListener("progress", function(event) {
|
||||
const percent = (event.loaded / event.total) * 100;
|
||||
uploadProcess.value = percent.toFixed(2);
|
||||
onProgress({ percent: Math.ceil(percent) });
|
||||
});
|
||||
onProgress({ percent: 1 });
|
||||
xhr.open(
|
||||
"POST",
|
||||
baseUrl + "file/upload?" + new URLSearchParams(params)
|
||||
);
|
||||
xhr.send(data);
|
||||
xhr.onreadystatechange = () => {
|
||||
if (xhr.readyState === 4 && xhr.status === 200) {
|
||||
let id = xhr.responseText;
|
||||
let code = id + key
|
||||
// if(setting.activeFuction === "SM4"){
|
||||
// code = id + 'SM4' + key
|
||||
// }
|
||||
file_Code_Map.value.push({
|
||||
code: code,
|
||||
fileName: fileName
|
||||
});
|
||||
notification["success"]({
|
||||
content: "上传完成",
|
||||
meta: `${fileName} 已成功上传`,
|
||||
duration: 2500,
|
||||
keepAliveOnHover: true
|
||||
});
|
||||
onFinish();
|
||||
} else {
|
||||
console.error(xhr.statusText);
|
||||
onError();
|
||||
}
|
||||
};
|
||||
});
|
||||
};
|
||||
const columns = [
|
||||
{
|
||||
title: "文件名",
|
||||
key: "fileName",
|
||||
width: 150
|
||||
},
|
||||
{
|
||||
title: "取件码（点击复制）",
|
||||
key: "code"
|
||||
}
|
||||
];
|
||||
|
||||
// 记录是否复制过，第一次复制的时候提醒可以连续复制
|
||||
var copyedArray = [];
|
||||
const rowProps = row => {
|
||||
return {
|
||||
style: "cursor: pointer;",
|
||||
onClick: () => {
|
||||
toClipboard(`${copyedArray.join('\n')}\n${row.code}`.trim()).then(() => {
|
||||
message.info(`已复制 ${row.fileName} 的取件码至剪切板`);
|
||||
if (copyedArray.length == 0) {
|
||||
message.info(
|
||||
`可以试试点击其他取件码，也许这个玩意会自动处理剪切板内容`
|
||||
);
|
||||
}
|
||||
copyedArray.push(row.code)
|
||||
});
|
||||
}
|
||||
};
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
Reference in new issue
Block a user