new Vue({
el: '#app',
data() {
return {
rname:'',
par:'',
AES:'',
dig:'',
filelist: [],
digList:[],
verify:{},
verifyList:[],
formData: {},
dialogFormVisible:false,
dialogFormVisible2:false,
dialogFormVisible4Edit: false,
dialogImageUrl:'',
dialogVisible:false,
disabled:false,
// 默认显示第几页
currentPage:1,
// 总条数，根据接口获取数据长度(注意：这里不能为空)
totalCount:1,
// 个数选择器（可修改）
pageSizes:[3,5,10],
// 默认每页显示的条数（可修改）
PageSize:3,
rules: {
picture_name: [{ required: true, message: '请输入图片名称', trigger: 'blur' }],
AES: [{ required: true, message: '请输入AES密钥', trigger: 'blur' }],
dig: [{ required: true, message: '请上传签名文件', trigger: 'blur' }],
picture:[{ required: true, message: '请上传图片', trigger: 'blur' }]
},
}
},
methods: {
// 每页显示的条数
handleSizeChange(val) {
// 改变每页显示的条数
this.PageSize=val
// 注意：在改变每页显示的条数时，要将页码显示到第一页
this.currentPage=1
},
// 显示第几页
handleCurrentChange(val) {
// 改变默认的页数
this.currentPage=val
},
handleOpen(key, keyPath) {
console.log(key, keyPath);
},
handleClose(key, keyPath) {
console.log(key, keyPath);
},
handlePicturePreview(file) {
console.log(file)
console.log(6)
this.par=file.raw;
const isLt2M = file.size / 1024 / 1024 < 10;
if (!isLt2M) {
this.$message.error('上传头像图片大小不能超过 10MB!');
this.clearFiles();
return isLt2M;
}
},
handlePreview(file) {
console.log(file);
},
handlePictureCardPreview(file) {
this.dialogImageUrl = file.url;
this.dialogVisible = true;
},
handlePictureCardPreviewTable(file) {
this.dialogImageUrl =window.document.location.href+'./img/'+file.picture_realname+'.'+file.picture_type;
console.log(this.dialogImageUrl)
this.dialogVisible = true;
},
handleDownload(file) {
let f =file.picture_realname+"."+file.picture_type
axios.post("/file/download",f,).then((result)=>{
var url = (window.document.location.href+"img/"+result.config.data)
var that = this
var fileName = file.picture_name
this.convertUrlToBase64(url).then(function (base64) {
var blob = that.convertBase64UrlToBlob(base64); // 转为blob对象
// 下载
if (that.myBrowser() == "IE") {
window.navigator.msSaveBlob(blob, fileName + ".png");
} else if (that.myBrowser() == "FF") {
window.location.href = url;
} else {
var a = document.createElement("a");
a.download = fileName;
a.href = URL.createObjectURL(blob);
document.body.appendChild(a)
a.click();
URL.revokeObjectURL(a.href) // 释放URL 对象
document.body.removeChild(a)
}
});
})
axios.post("/file/downloadMsg",f,).then((res)=>{
console.log(res)
this.downloadFile(res.data,file.picture_name)
})
},
downloadFile(data,fileName){
// data为blob格式
var blob = new Blob([data]);
var downloadElement = document.createElement('a');
var href = window.URL.createObjectURL(blob);
downloadElement.href = href;
downloadElement.download = fileName;
document.body.appendChild(downloadElement);
downloadElement.click();
document.body.removeChild(downloadElement);
window.URL.revokeObjectURL(href);
},
// 转换为base64
convertUrlToBase64(url) {
return new Promise(function (resolve, reject) {
var img = new Image();
//设置图片跨越，没有跨越cavas会被污染无法画出
img.crossOrigin = "Anonymous";
img.src = url;
img.onload = function () {
var canvas = document.createElement("canvas");
canvas.width = img.width;
canvas.height = img.height;
var ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0, img.width, img.height);
var ext = img.src
.substring(img.src.lastIndexOf(".") + 1)
.toLowerCase();
//转换为base64
var dataURL = canvas.toDataURL("image/" + ext);
var base64 = {
dataURL: dataURL,
type: "image/" + ext,
ext: ext
};
resolve(base64);
};
});
},
// base64转换为blob流
convertBase64UrlToBlob(base64) {
var parts = base64.dataURL.split(";base64,");
var contentType = parts[0].split(":")[1];
var raw = window.atob(parts[1]);
var rawLength = raw.length;
var uInt8Array = new Uint8Array(rawLength);
for (var i = 0; i < rawLength; i++) {
uInt8Array[i] = raw.charCodeAt(i);
}
return new Blob([uInt8Array], {
type: contentType
});
},
// 判断浏览器
myBrowser() {
var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串
if (userAgent.indexOf("OPR") > -1) {
return "Opera";
} //判断是否Opera浏览器 OPR/43.0.2442.991
if (userAgent.indexOf("Firefox") > -1) {
return "FF";
} //判断是否Firefox浏览器 Firefox/51.0
if (userAgent.indexOf("Trident") > -1) {
return "IE";
} //判断是否IE浏览器 Trident/7.0; rv:11.0
if (userAgent.indexOf("Edge") > -1) {
return "Edge";
} //判断是否Edge浏览器 Edge/14.14393
if (userAgent.indexOf("Chrome") > -1) {
return "Chrome";
} // Chrome/56.0.2924.87
if (userAgent.indexOf("Safari") > -1) {
return "Safari";
} //判断是否Safari浏览器 AppleWebKit/534.57.2 Version/5.1.7 Safari/534.57.2
},
init(){
const that = this
axios.get("/file/findAll", this.formData, ).then((result) => {
that.filelist = result.data
that.totalCount=result.data.length
});
let nav =document.querySelector(".nav")
console.log(Cookies.get('email')==undefined)
if(Cookies.get('email')!=undefined){
nav.innerHTML =`欢迎您，${Cookies.get('email')}
退出 `
}else{
nav.innerHTML = `登录
/
注册`
}
},
quit(){
Cookies.remove('email');
this.init()
},
//重置表单
resetForm() {
this.formData = {};
//this.$refs['myDig'].clearValidate();
this.$nextTick(() => {
this.$refs.mYupload.clearFiles()
})
},
//重置解密
resetDig() {
this.digList = {};
this.$nextTick(() => {
this.$refs.myDig.clearFiles()
})
},
//重置验证
resetDig() {
this.verifyList = {};
this.$nextTick(() => {
this.$refs.myVerify.clearFiles()
})
},
//弹出添加窗口
handleCreate() {
this.resetForm();
this.dialogFormVisible = true;
},
uploadDig(file){
this.dig=file.raw;
},
handleDig(file) {
this.rname=file.picture_realname;
this.resetDig();
this.dialogFormVisible2 = true;
},
handleVerify() {
this.resetForm();
this.dialogFormVisible4Edit = true;
},
openFile(file,name) {
let this_vue=this
//验证的文件
console.log(name.picture_name)
var reader = new FileReader();
reader.onload = function () {
if (reader.result) {
//打印文件内容
console.log(reader.result);
var p= name.picture_id+';'+ reader.result
axios.post("/file/verify", p,{headers: { 'Content-Type': 'application/json','data': 'JSON.stringify(Data)'}}).then((res) => {
if(res.data!=0){
this_vue.$alert('AES密钥(请复制):'+res.data,'验证成功', {
confirmButtonText: '确定',
});
}else{
this_vue.$alert("请重新确认",'验证错误', {
confirmButtonText: '确定',
});
}
})
}
};
reader.readAsText(file.raw);
this.resetDig()
},
handleEncryptionDig(){
let file=this.dig
let this_vue=this
let aes = this.formData.AES+";"+this.rname;
let reader = new FileReader();
reader.onload = function () {
if (reader.result) {
//打印文件内容
let str = reader.result+aes;
axios.post("/file/encrypt",str,{headers: { 'Content-Type': 'application/json','data': 'JSON.stringify(Data)'}}).then((res) => {
if(res.data=="success"){
this_vue.$alert('文件签名正确！','验证成功', {
confirmButtonText: '确定',
});
}else if(res.data=="failed"){
this_vue.$alert('文件与签名不符，请重新检查！','验证出错', {
confirmButtonText: '确定',
});
}else {
this_vue.$alert('服务器可能出错，或密钥格式错误，请稍后重试！','验证出错', {
confirmButtonText: '确定',
});
}
});
}
};
reader.readAsText(file);
this.dialogFormVisible2 = false;
this.rname=null;
this.resetDig();
},
handleEdit() {
let that = this
if(this.ifLogin()) {
const _file = this.par;
// 通过 FormData 对象上传文件
var formData = new FormData();
formData.append("file", _file);
this.formData.picture_user= this.ifLogin();
console.log(this.formData)
axios.post("/file/upload", formData).then((res) => {
this.formData.picture_realname = res.data.split(".")[0]
this.formData.picture_type = res.data.split(".")[1]
axios.post("/file/save", this.formData).then((result) => {
this.resetForm();
this.dialogFormVisible = false;
this.clearFiles()
}).then(function () {
that.init()
});
})
}else {
this_vue.$alert('还未登录','警告', {
confirmButtonText: '确定',
});
}
},
ifLogin(){
if(Cookies.get('email')==undefined){
return false
}else {
return Cookies.get('email')
}
}
},
mounted() {
this.init();
window.quit=this.quit
}
})