Skip to content

E
exhibition_page
提交 516be8ef authored 作者: 龙菲's avatar 龙菲
浏览文件
操作

完善以图搜图前端界面和上传逻辑

上级 69d9e5b7
隐藏空白字符变更
内嵌 并排
正在显示 包含 791 行增加 和 73 行删除
src/router/index.js
浏览文件 @ 516be8ef
......@@ -187,6 +187,13 @@ const routes = [
name: "3d",
component: () =>
import("@/views/3d/index.vue"),
},
// 3d展示页面，仅供测试用
{
path: "/caj",
name: "caj",
component: () =>
import("@/views/caj/index.vue"),
},
// 404
{
......
src/views/caj/index.vue 0 → 100644
浏览文件 @ 516be8ef
<template>
<!-- 本文件由HTML+css+jquery页面修改而来，后期优化，暂时能够使用即可 -->
<div>
<!-- 头部 -->
<div class="head_top">
<img class="head_logo_img" src="@/assets/images/caj/Logo_banner.png" />
</div>
<!-- 内容区域 -->
<div class="content">
<!-- 标题 -->
<div class="content_title">
<ul>
<li
@click="changeDemo(item.value)"
:class="{ active: currentDemo == item.value, 'list-item': true }"
v-for="(item, index) in list"
:key="index"
>
{{ item.label }}
</li>
</ul>
</div>
<!-- 表头 -->
<div class="content_head">
<ul>
<li style="width: 27%">软件名称</li>
<li style="width: 15%">软件大小</li>
<li style="width: 15%">系统版本</li>
<li style="width: 15%">更新时间</li>
<li style="width: 15%">下载地址</li>
</ul>
</div>
<!-- 内容列表 -->
<div class="content_line">
<!-- TXUOS 列表 -->
<ul class="out_ul" v-show="currentDemo === 'TXUOS'">
<li class="out_ul_li">
<ul class="in_ul">
<li style="width: 28%" class="in_ul_li">
<img
src="@/assets/images/caj/intel.png"
style="float: left; margin-top: 10px"
/><span style="float: left; margin-left: 20px">Intel,AMD</span>
</li>
<li style="width: 15%; margin-left: 5px" class="in_ul_li">
47.6M
</li>
<li style="width: 15%; margin-left: 15px" class="in_ul_li">
统信
</li>
<li style="width: 15%; margin-left: 35px" class="in_ul_li">
2023-01-04
</li>
<li
style="width: 15%; margin-left: 15px; line-height: 50px"
class="in_ul_li"
>
<a class="download" :href="TXUOS_INTER"></a>
</li>
<!--<li style="width:15%;margin-left:15px;line-height:50px;" class="in_ul_li"> <button class="download" onclick="downloads()"></button></li>-->
</ul>
</li>
<li class="out_ul_li">
<ul class="in_ul">
<li style="width: 28%" class="in_ul_li">
<img
src="@/assets/images/caj/other.png"
style="float: left; margin-top: 10px"
/><span style="float: left; margin-left: 20px"
>飞腾FT200，鲲鹏920</span
>
</li>
<li style="width: 15%; margin-left: 5px" class="in_ul_li">
56.6M
</li>
<li style="width: 15%; margin-left: 15px" class="in_ul_li">
统信
</li>
<li style="width: 15%; margin-left: 35px" class="in_ul_li">
2023-01-04
</li>
<li
style="width: 15%; margin-left: 15px; line-height: 50px"
class="in_ul_li"
>
<a class="download" :href="TXUOS_FT"></a>
</li>
</ul>
</li>
<li class="out_ul_li">
<ul class="in_ul">
<li style="width: 28%" class="in_ul_li">
<img
src="@/assets/images/caj/longxin.png"
style="float: left; margin-top: 10px"
/><span style="float: left; margin-left: 20px">龙芯3A4000</span>
</li>
<li style="width: 15%; margin-left: 5px" class="in_ul_li">
56.4M
</li>
<li style="width: 15%; margin-left: 15px" class="in_ul_li">
统信
</li>
<li style="width: 15%; margin-left: 35px" class="in_ul_li">
2023-01-04
</li>
<li
style="width: 15%; margin-left: 15px; line-height: 50px"
class="in_ul_li"
>
<a class="download" :href="TXUOS_LX3A4000"></a>
</li>
</ul>
</li>
<li class="out_ul_li">
<ul class="in_ul">
<li style="width: 28%" class="in_ul_li">
<img
src="@/assets/images/caj/longxin.png"
style="float: left; margin-top: 10px"
/><span style="float: left; margin-left: 20px">龙芯3A5000</span>
</li>
<li style="width: 15%; margin-left: 5px" class="in_ul_li">
60.7M
</li>
<li style="width: 15%; margin-left: 15px" class="in_ul_li">
统信
</li>
<li style="width: 15%; margin-left: 35px" class="in_ul_li">
2023-01-04
</li>
<li
style="width: 15%; margin-left: 15px; line-height: 50px"
class="in_ul_li"
>
<a class="download" :href="TXUOS_LX3A5000"></a>
</li>
</ul>
</li>
<!-- <li class="out_ul_li">
<ul class="in_ul">
<li style="width: 28%" class="in_ul_li">
<img
src="@/assets/images/caj/other.png"
style="float: left; margin-top: 10px"
/><span style="float: left; margin-left: 20px"
>昆明市人民检察院适配安装包</span
>
</li>
<li style="width: 15%; margin-left: 5px" class="in_ul_li">
47.6M
</li>
<li style="width: 15%; margin-left: 15px" class="in_ul_li">
统信
</li>
<li style="width: 15%; margin-left: 35px" class="in_ul_li">
2023-01-04
</li>
<li
style="width: 15%; margin-left: 15px; line-height: 50px"
class="in_ul_li"
>
<a
class="download"
:href="TXUOS_KMSRMJCY"
></a>
</li>
</ul>
</li>
<li class="out_ul_li">
<ul class="in_ul">
<li style="width: 28%" class="in_ul_li">
<img
src="@/assets/images/caj/other.png"
style="float: left; margin-top: 10px"
/><span style="float: left; margin-left: 20px; font-size: 13px"
>南涧彝族自治县人民检察院适配安装包</span
>
</li>
<li style="width: 15%; margin-left: 5px" class="in_ul_li">
56.6M
</li>
<li style="width: 15%; margin-left: 15px" class="in_ul_li">
统信
</li>
<li style="width: 15%; margin-left: 35px" class="in_ul_li">
2023-01-04
</li>
<li
style="width: 15%; margin-left: 15px; line-height: 50px"
class="in_ul_li"
>
<a
class="download"
href="./SoftWare/TXUOS/NJXRMJCY/signed_net.cnki.cajviewer_1.2.0-1_mips64.deb.deb"
></a>
</li>
</ul>
</li> -->
</ul>
<!--银河麒麟-->
<ul class="out_ul" v-show="currentDemo === 'YHQL'">
<!-- ... （省略部分代码） -->
<li class="out_ul_li">
<ul class="in_ul">
<li style="width: 28%" class="in_ul_li">
<img
src="@/assets/images/caj/intel.png"
style="float: left; margin-top: 10px"
/><span style="float: left; margin-left: 20px">Intel,AMD</span>
</li>
<li style="width: 15%; margin-left: 5px" class="in_ul_li">
47.7M
</li>
<li style="width: 15%; margin-left: 15px" class="in_ul_li">
银河麒麟
</li>
<li style="width: 15%; margin-left: 35px" class="in_ul_li">
2023-01-04
</li>
<li
style="width: 15%; margin-left: 15px; line-height: 50px"
class="in_ul_li"
>
<a class="download" :href="YHQL_INTER"></a>
</li>
</ul>
</li>
<li class="out_ul_li">
<ul class="in_ul">
<li style="width: 28%" class="in_ul_li">
<img
src="@/assets/images/caj/other.png"
style="float: left; margin-top: 10px"
/><span style="float: left; margin-left: 20px"
>飞腾FT2000，鲲鹏920，麒麟990</span
>
</li>
<li style="width: 15%; margin-left: 5px" class="in_ul_li">
46.7M
</li>
<li style="width: 15%; margin-left: 15px" class="in_ul_li">
银河麒麟
</li>
<li style="width: 15%; margin-left: 35px" class="in_ul_li">
2023-01-04
</li>
<li
style="width: 15%; margin-left: 15px; line-height: 50px"
class="in_ul_li"
>
<a class="download" :href="YHQL_FT"></a>
</li>
</ul>
</li>
<li class="out_ul_li">
<ul class="in_ul">
<li style="width: 28%" class="in_ul_li">
<img
src="@/assets/images/caj/longxin.png"
style="float: left; margin-top: 10px"
/><span style="float: left; margin-left: 20px">龙芯3A4000</span>
</li>
<li style="width: 15%; margin-left: 5px" class="in_ul_li">
64.8M
</li>
<li style="width: 15%; margin-left: 15px" class="in_ul_li">
银河麒麟
</li>
<li style="width: 15%; margin-left: 35px" class="in_ul_li">
2023-01-04
</li>
<li
style="width: 15%; margin-left: 15px; line-height: 50px"
class="in_ul_li"
>
<a class="download" :href="YHQL_LX3A4000"></a>
</li>
</ul>
</li>
<li class="out_ul_li">
<ul class="in_ul">
<li style="width: 28%" class="in_ul_li">
<img
src="@/assets/images/caj/longxin.png"
style="float: left; margin-top: 10px"
/><span style="float: left; margin-left: 20px">龙芯3A5000</span>
</li>
<li style="width: 15%; margin-left: 5px" class="in_ul_li">
60.6M
</li>
<li style="width: 15%; margin-left: 15px" class="in_ul_li">
银河麒麟
</li>
<li style="width: 15%; margin-left: 35px" class="in_ul_li">
2023-01-04
</li>
<li
style="width: 15%; margin-left: 15px; line-height: 50px"
class="in_ul_li"
>
<a class="download" :href="YHQL_LX3A5000"></a>
</li>
</ul>
</li>
</ul>
<!--中科方德-->
<ul class="out_ul" v-show="currentDemo === 'ZKFD'">
<li class="out_ul_li">
<ul class="in_ul">
<li style="width: 28%" class="in_ul_li">
<img
src="@/assets/images/caj/other.png"
style="float: left; margin-top: 10px"
/><span style="float: left; margin-left: 20px"
>服务器端（rpm文件）</span
>
</li>
<li style="width: 15%; margin-left: 5px" class="in_ul_li">
35.4M
</li>
<li style="width: 15%; margin-left: 15px" class="in_ul_li">
中科方德
</li>
<li style="width: 15%; margin-left: 35px" class="in_ul_li">
2023-01-04
</li>
<li
style="width: 15%; margin-left: 15px; line-height: 50px"
class="in_ul_li"
>
<a class="download" :href="ZKFD_SERVER"></a>
</li>
</ul>
</li>
<li class="out_ul_li">
<ul class="in_ul">
<li style="width: 28%" class="in_ul_li">
<img
src="@/assets/images/caj/other.png"
style="float: left; margin-top: 10px"
/><span style="float: left; margin-left: 20px"
>桌面端（deb文件）</span
>
</li>
<li style="width: 15%; margin-left: 5px" class="in_ul_li">
47.7M
</li>
<li style="width: 15%; margin-left: 15px" class="in_ul_li">
中科方德
</li>
<li style="width: 15%; margin-left: 35px" class="in_ul_li">
2023-01-04
</li>
<li
style="width: 15%; margin-left: 15px; line-height: 50px"
class="in_ul_li"
>
<a class="download" :href="ZKFD_CLIENT"></a>
</li>
</ul>
</li>
</ul>
<!--Windows-->
<ul class="out_ul" v-show="currentDemo === 'WIN'">
<li class="out_ul_li">
<ul class="in_ul">
<li style="width: 28%" class="in_ul_li">
<img
src="@/assets/images/caj/other.png"
style="float: left; margin-top: 10px"
/><span style="float: left; margin-left: 20px"
>CAJViewer 8（64-bit）</span
>
</li>
<li style="width: 15%; margin-left: 5px" class="in_ul_li">
111M
</li>
<li style="width: 15%; margin-left: 15px" class="in_ul_li">
Windows
</li>
<li style="width: 15%; margin-left: 35px" class="in_ul_li">
2023-01-04
</li>
<li
style="width: 15%; margin-left: 15px; line-height: 50px"
class="in_ul_li"
>
<a class="download" :href="WINDOWS_64"></a>
</li>
</ul>
</li>
<li class="out_ul_li">
<ul class="in_ul">
<li style="width: 28%" class="in_ul_li">
<img
src="@/assets/images/caj/other.png"
style="float: left; margin-top: 10px"
/><span style="float: left; margin-left: 20px"
>CAJViewer 8（32-bit）</span
>
</li>
<li style="width: 15%; margin-left: 5px" class="in_ul_li">
109M
</li>
<li style="width: 15%; margin-left: 15px" class="in_ul_li">
Windows
</li>
<li style="width: 15%; margin-left: 35px" class="in_ul_li">
2023-01-04
</li>
<li
style="width: 15%; margin-left: 15px; line-height: 50px"
class="in_ul_li"
>
<a class="download" :href="WINDOWS_32"></a>
</li>
</ul>
</li>
</ul>
<!--绝大部分操作系统都可以用，x86的linux都可以用。包括 kylin, uos, 中科方德-->
<ul class="out_ul" v-show="currentDemo === 'JDBF'">
<li class="out_ul_li">
<ul class="in_ul">
<li style="width: 28%" class="in_ul_li">
<img
src="@/assets/images/caj/other.png"
style="float: left; margin-top: 10px"
/><span style="float: left; margin-left: 20px"
>CAJViewer-x86_64</span
>
</li>
<li style="width: 15%; margin-left: 5px" class="in_ul_li">
64.2M
</li>
<li style="width: 15%; margin-left: 15px" class="in_ul_li">
绝大部分适配
</li>
<li style="width: 15%; margin-left: 35px" class="in_ul_li">
2023-01-04
</li>
<li
style="width: 15%; margin-left: 15px; line-height: 50px"
class="in_ul_li"
>
<a class="download" :href="JDBF"></a>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</template>
<script>
import fullUrl from "./urls";
export default {
data() {
return {
list: [
{
label: "Windows系统适配",
value: "WIN",
},
{
label: "统信UOS",
value: "TXUOS",
},
{
label: "银河麒麟",
value: "YHQL",
},
{
label: "中科方德",
value: "ZKFD",
},
{
label: "绝大部分国产化系统适配",
value: "JDBF",
},
],
currentDemo: "WIN",
activeBg: require("@/assets/images/caj/title_bg2.png"),
defaultBg: require("@/assets/images/caj/title_bg1.png"),
...fullUrl,
};
},
methods: {
changeDemo(n) {
this.currentDemo = n;
},
},
};
</script>
<style scoped lang="scss">
/* 样式表样式（将原来的样式表内容放在这里） */
@charset "utf-8";
b,
i {
font-style: normal;
font-weight: normal;
}
a:link,
a:visited {
color: #333;
}
.cBlu:link,
.cBlu:visited,
.cBlu {
color: #107bce;
}
.gray:link,
.gray:visited {
color: #107bce;
}
a:hover {
text-decoration: none;
color: #c5c527;
cursor: pointer;
}
input,
select {
border: none;
outline: none;
}
.wrap,
.wrapper,
.header_t_in,
.header_b,
.main_sz,
.bigNav,
.footerL_gf-in,
.reader-tools-bar {
width: 1200px;
margin: 0 auto;
}
body {
font-family: "\5FAE\8F6F\96C5\9ED1";
background-color: #f8f8f8;
}
/* 首页标头*/
.head_top {
width: 100%;
height: 135px;
img {
width: 100%;
}
}
.head_left_link {
float: left;
width: 100px;
color: #fff;
text-align: center;
font-size: 12px;
margin-top: -5px;
}
.head_right_link {
float: right;
width: 300px;
color: #fff;
text-align: center;
font-size: 12px;
margin-top: -5px;
}
// .head_title {
// width: 100%;
// height: 190px;
// background: url(@/assets/images/caj/index/banner.png);
// background-size: 100% 100%;
// }
// .head_title img {
// width: 40%;
// height: 60px;
// /*position: absolute;*/
// margin-left: 30%;
// /*left: 50%;*/
// /*top: 40%;*/
// /*margin-left: -350px;*/
// /*margin-top: -190px;*/
// /*margin: 0 auto;*/
// margin-top: 55px;
// }
.head_logo_img {
/*height: 120px;*/
background-size: 100% 100%;
}
.content {
width: 100%;
height: auto;
background-color: #f0f0f0;
padding-top: 60px;
}
.content_title {
width: 80%;
height: 130px;
margin-left: 10%;
margin-top: -20px;
}
.content_title ul {
width: 100%;
height: 130px;
list-style: none;
}
.content_title ul li {
width: 19%;
height: 120px;
float: left;
text-align: center;
line-height: 100px;
margin-left: 12px;
background-image: url(@/assets/images/caj/title_bg1.png);
background-size: 100% 100%;
}
.list-item {
// margin-left: ;
}
.active {
background-image: url(@/assets/images/caj/title_bg2.png) !important;
color:#fff;
}
.content_head {
width: 80%;
height: 50px;
margin-left: 10%;
margin-top: -20px;
}
.content_head ul {
width: 100%;
height: 50px;
list-style: none;
}
.content_head ul li {
height: 50px;
float: left;
line-height: 50px;
text-align: center;
margin-left: 15px;
}
.content_line {
width: 80%;
height: 650px;
margin-left: 10%;
margin-top: -20px;
}
.out_ul {
width: 100%;
height: auto;
list-style: none;
font-size: 14px;
color: #808080;
}
.out_ul_li {
width: 98%;
height: 80px;
margin-top: 25px;
}
.in_ul {
width: 100%;
height: 80px;
list-style: none;
background-image: url(@/assets/images/caj/line_li_bg.png);
background-size: 100% 100%;
}
.in_ul_li {
height: 80px;
float: left;
line-height: 60px;
text-align: center;
&:nth-child(1){
padding-left: 140px;
}
}
.download:hover {
background-image: url(@/assets/images/caj/download2.png);
}
.in_ul_li button {
background-image: url(@/assets/images/caj/download.png);
width: 120px;
height: 40px;
background-size: 100% 100%;
border: none;
}
.download {
background-image: url(@/assets/images/caj/download.png);
margin-left: 60px;
width: 120px;
height: 36px;
display: block;
background-size: cover;
margin-top: 10px;
}
</style>
src/views/caj/urls.js 0 → 100644
浏览文件 @ 516be8ef
// const baseUrl = process.env.VUE_APP_BASE_HOST
const baseUrl = ''
const folder = '/SoftWare'
const urls = {
TXUOS_INTER:
"/TXUOS/inter/net.cnki.cajviewer_1.1.1-3_amd64.deb",
TXUOS_FT: "/TXUOS/FT/net.cnki.cajviewer_1.1.1-3_arm64.deb",
TXUOS_LX3A4000:
"/TXUOS/LX3A4000/net.cnki.cajviewer_1.1.1-3_mips64.deb",
TXUOS_LX3A5000:
"/TXUOS/LX3A5000/net.cnki.cajviewer_1.1.0-2_loongarch64.deb",
TXUOS_KMSRMJCY:
"/TXUOS/KMSRMJCY/signed_net.cnki.cajviewer_1.2.0-1_mips64.deb.deb",
YHQL_INTER: "/YHQL/inter/cajviewer_1.1.1-3_amd64.deb",
YHQL_FT: "/YHQL/FT/cajviewer_1.1.1-3_arm64.deb",
YHQL_LX3A4000: "/YHQL/LX3A4000/cajviewer_1.1.1-3_mips64.deb",
YHQL_LX3A5000:
"/YHQL/LX3A5000/cajviewer_1.1.0-2_loongarch64.deb",
ZKFD_SERVER: "/ZKFD/Server/cajviewer-1.1.1-3.nfs4.x86_64.rpm",
ZKFD_CLIENT: "/ZKFD/Client/cajviewer_1.1.1-3_amd64.deb",
WINDOWS_64: "/Windows/64/CAJViewer 8.1_x64-setup.exe",
WINDOWS_32: "/Windows/32/CAJViewer8.0.1.1-setup.exe",
JDBF: "/JDBF/CAJViewer-x86_64-1.1.1.AppImage",
}
const fullUrl = addBaseUrl(urls)
// 增加baseUrl
function addBaseUrl() {
const newUrls = {}
for (const key in urls) {
newUrls[key] = baseUrl + folder + urls[key]
}
return newUrls
}
export default fullUrl
\ No newline at end of file
src/views/searchPic/components/imgList/index.vue
浏览文件 @ 516be8ef
......@@ -61,7 +61,7 @@ export default {
// }
},
handleClickImg(e){
console.log(e);
console.log(e);
}
},
};
......
src/views/searchPic/index.vue
浏览文件 @ 516be8ef
......@@ -13,7 +13,7 @@
<div class="right-pic"></div>
</div>
<div class="upload-wrapper">
<div class="upload-bar">
<div class="upload-bar" @click="handleClickUpload" v-loading="loading">
<div class="left-area">
<div class="text">点击这里 上传图片</div>
<div class="camera">
......@@ -22,53 +22,25 @@
</div>
<div class="right-button">以图搜图</div>
</div>
<!-- <div class="upload-panel">
<el-upload
ref="upload"
class="upload-area"
name="zipFile"
accept=".jpg,.png"
action
:before-upload="handleBeforeUpload"
:show-file-list="false"
:on-success="handleSuccess"
:on-progress="handleProgress"
:file-list="fileList"
drag
>
<div v-if="showProgress">
<el-progress
id="progress"
type="circle"
:percentage="percent"
:stroke-width="8"
:width="100"
:show-text="true"
></el-progress>
</div>
<div class="img-wrapper" v-else>
<div class="icon">
<svg-icon icon-class="img"></svg-icon>
</div>
<div class="text">
<em>拖拽图片</em> 到这里或 <em>点击这里</em> 上传图片
</div>
<div class="camera">
<svg-icon icon-class="camera"></svg-icon>
</div>
</div>
</el-upload>
</div> -->
<el-upload
v-show="false"
ref="uploader"
class="upload-area"
accept=".jpg,.png"
action
:before-upload="handleBeforeUpload"
:show-file-list="false"
:on-success="handleSuccess"
>
<el-button ref="uploadButton" class="upload-button">上传</el-button>
</el-upload>
</div>
<div class="current-pic" v-if="showResult">
<div class="img-container">
<div class="close">
<div class="current-pic">
<div class="img-container" v-if="currentImg">
<div class="close" @click="handleCloseImg">
<i class="el-icon-close"></i>
</div>
<img
src="http://localhost:8081/files/culturalRelicImport/2022-12-20-ba663e0ebd1445298631d77df692d414/%E8%B4%B5%E5%B7%9E%E7%9C%81%E5%8D%9A%E7%89%A9%E9%A6%86-%E6%96%87%E7%89%A92/faceImage/53%E8%BF%9B%E8%B4%A1%E4%BA%BA%E7%9F%B3%E5%88%BB/low/53.%E8%BF%9B%E8%B4%A1%E4%BA%BA%E7%9F%B3%E5%88%BB.png"
alt=""
/>
<img :src="currentImg" alt="" />
</div>
</div>
<ImgList v-if="showResult" />
......@@ -83,19 +55,14 @@ export default {
},
data() {
return {
// progressText: "", //进度文字
progressPercent: 0, //进度百分比
showProgress: false, //是否展示进度条
fileList: [], //双向绑定的文件，上传完之后会被清空
showFileList: [], //展示的文件列表,上传之后不会被清空
showResult: true, //是否展示图片结果
showResult: false, //是否展示图片结果
currentImg: "", //当前搜索的图片
loading: false, //是否正在上传
};
},
mounted() {},
methods: {
// 上传前钩子，处理文件类型
async handleBeforeUpload(file) {
// debugger;
let reg = /(?<=\.)[a-z]+$/g;
let fileType = file.name.match(reg) + "";
let typeArr = ["png", "jpg", "jpeg"];
......@@ -103,34 +70,35 @@ export default {
this.$message.warning("上传文件格式错误!");
return;
}
// mock上传过程
this.loading = true;
let formData = new FormData();
formData.append("file", file);
this.showProgress = true;
// TODO:上传接口调用
this.$message.warning("上传名称：" + file.name);
// // TODO:上传接口调用
setTimeout(() => {
this.showProgress = false;
this.progressPercent = 0;
}, 1000);
},
// 文件上传进度钩子，展示文件进度
handleProgress(event) {
console.log(event);
this.showProgress = true;
this.progressPercent = parseInt(event.percent);
this.currentImg =
"http://localhost:8081/files/culturalRelicImport/2022-12-20-ba663e0ebd1445298631d77df692d414/%E8%B4%B5%E5%B7%9E%E7%9C%81%E5%8D%9A%E7%89%A9%E9%A6%86-%E6%96%87%E7%89%A92/faceImage/53%E8%BF%9B%E8%B4%A1%E4%BA%BA%E7%9F%B3%E5%88%BB/low/53.%E8%BF%9B%E8%B4%A1%E4%BA%BA%E7%9F%B3%E5%88%BB.png";
this.$message.success("已查询出10条件结果");
this.showResult = true;
this.loading = false;
}, 3000);
},
// 上传成功之后的钩子
handleSuccess(res) {
console.log(res);
if (res.code == 200) {
this.progressPercent = 100;
} else {
console.log("上传失败");
}
this.showProgress = false;
this.loading = false;
},
// 关闭已上传的图片
handleCloseImg() {
console.log("关闭");
this.currentImg = "";
},
// 点击上传
handleClickUpload() {
if (this.loading) {
this.$message.warning('当前有图片正在上传，请稍等~')
return
}
this.$refs.uploader.$el.querySelector(".upload-button").click();
},
},
};
......@@ -225,6 +193,7 @@ $transition-ease-03s: all ease 0.3s;
justify-content: space-between;
padding-right: 16px;
width: 80%;
color: #ccc;
i {
font-size: 30px;
color: $deep-blue;
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论