lan-air
121 lines
4.8 KiB
HTML
121 lines
4.8 KiB
HTML
<!doctype html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport"
|
||
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
|
||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
|
||
<!-- 引入组件库 -->
|
||
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
|
||
<title>寄件箱-口令传送箱</title>
|
||
<style>
|
||
.el-upload-dragger {
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div id="app" style="text-align: center;height: 100vh">
|
||
<el-row style="width:400px;margin: auto">
|
||
<el-col :span="24" style="margin: 1rem 0">
|
||
<el-card>
|
||
<el-upload
|
||
drag
|
||
action=""
|
||
multiple
|
||
:on-success="successUpload"
|
||
>
|
||
<i class="el-icon-upload"></i>
|
||
<div class="el-upload__text">将文件拖、粘贴到此处，或<em>点击上传</em>，24h后删除</div>
|
||
<div class="el-upload__tip" slot="tip">
|
||
<a href="/">
|
||
<el-button>去取件</el-button>
|
||
</a>
|
||
<el-button @click="drawer=true">文件箱</el-button>
|
||
|
||
</div>
|
||
</el-upload>
|
||
</el-card>
|
||
</el-col>
|
||
</el-row>
|
||
<el-drawer
|
||
title="文件库"
|
||
:visible.sync="drawer"
|
||
direction="btt"
|
||
size="50%">
|
||
<el-card>
|
||
<el-empty v-if="files.length===0" description="请上传文件"></el-empty>
|
||
<el-card style="margin-top: 0.2rem" v-for="file in files" :key="file.code">
|
||
<el-row>
|
||
<el-col :span="24" style="line-height: 45px">
|
||
${ file.name }
|
||
</el-col>
|
||
<el-col :span="24">
|
||
取件码：<h1 style="margin: 0;display: inline">${ file.code }</h1>
|
||
</el-col>
|
||
</el-row>
|
||
</el-card>
|
||
</el-card>
|
||
</el-drawer>
|
||
</div>
|
||
</body>
|
||
<!-- import Vue before Element -->
|
||
<script src="https://unpkg.com/vue@2/dist/vue.js"></script>
|
||
<!-- import JavaScript -->
|
||
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
|
||
<script src="//unpkg.com/axios/dist/axios.min.js"></script>
|
||
<script>
|
||
new Vue({
|
||
el: '#app',
|
||
delimiters: ['${', '}'],
|
||
data: function () {
|
||
return {
|
||
files: [],
|
||
drawer: false
|
||
};
|
||
},
|
||
mounted: function () {
|
||
const that = this
|
||
document.addEventListener('paste', function () {
|
||
const items = event.clipboardData && event.clipboardData.items;
|
||
if (items && items.length) {
|
||
for (let i = 0; i < items.length; i++) {
|
||
if (items[i].kind === 'string') {
|
||
if (items[i].type.match(/^text\/plain/)) {
|
||
const FileData = new FormData();
|
||
that.$message('剪切板文字正在上传，请稍等');
|
||
items[i].getAsString(function (str) {
|
||
FileData.append('text', str);
|
||
axios.post('', FileData)
|
||
.then(function (response) {
|
||
that.$message({'message': response.data.msg, 'type': 'success'});
|
||
that.files.push(response.data.data)
|
||
})
|
||
.catch(function (error) {
|
||
that.$message({'message': error.data.msg, 'type': 'error'});
|
||
});
|
||
});
|
||
}
|
||
} else {
|
||
const file = items[i].getAsFile();
|
||
that.$message('剪切板文件正在上传，请稍等');
|
||
const FileData = new FormData();
|
||
FileData.append('file', file || '');
|
||
axios.post('', FileData).then(async res => {
|
||
that.files.push(res.data.data);
|
||
that.$message({'message': res.data.msg, 'type': 'success'});
|
||
})
|
||
}
|
||
|
||
}
|
||
}
|
||
});
|
||
},
|
||
methods: {
|
||
successUpload(response, file, fileList) {
|
||
this.files.push(response.data[0])
|
||
},
|
||
}
|
||
})
|
||
</script>
|
||
</html> |