Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
软件工程实践2022年春W班
今天不会摆烂对不队
Project_Team3
提交
4184dff2
P
Project_Team3
项目概览
软件工程实践2022年春W班
/
今天不会摆烂对不队
/
Project_Team3
通知
10
Star
0
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
P
Project_Team3
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
前往新版Gitcode,体验更适合开发者的 AI 搜索 >>
提交
4184dff2
编写于
6月 17, 2022
作者:
M
McGrady2002
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
完成题库上传-表单验证
上级
ed027a82
变更
3
隐藏空白更改
内联
并排
Showing
3 changed file
with
187 addition
and
0 deletion
+187
-0
vue/src/router/index.js
vue/src/router/index.js
+5
-0
vue/src/views/Upload.vue
vue/src/views/Upload.vue
+1
-0
vue/src/views/Upload2.vue
vue/src/views/Upload2.vue
+181
-0
未找到文件。
vue/src/router/index.js
浏览文件 @
4184dff2
...
@@ -111,6 +111,11 @@ const routes = [
...
@@ -111,6 +111,11 @@ const routes = [
name
:
'
Upload
'
,
name
:
'
Upload
'
,
component
:
()
=>
import
(
'
../views/Upload.vue
'
)
component
:
()
=>
import
(
'
../views/Upload.vue
'
)
},
},
{
path
:
'
/Upload2
'
,
name
:
'
Upload2
'
,
component
:
()
=>
import
(
'
../views/Upload2.vue
'
)
},
// {
// {
// path: '/ManagePageTable',
// path: '/ManagePageTable',
// name: 'ManagePageTable',
// name: 'ManagePageTable',
...
...
vue/src/views/Upload.vue
浏览文件 @
4184dff2
...
@@ -40,6 +40,7 @@
...
@@ -40,6 +40,7 @@
</span>
</span>
</el-dialog>
</el-dialog>
</div>
</div>
</
template
>
</
template
>
<
script
>
<
script
>
...
...
vue/src/views/Upload2.vue
0 → 100644
浏览文件 @
4184dff2
<
template
>
<div>
<!--1.加上rules属性即开启表单验证规则,rules动态绑定了一个对象,对象在script里面定义,对象里面包含的是要验证的表单字段-->
<!--4.ref相当于给了el-form一个验证的时候使用的唯一名称-->
<!--model让表单动态绑定一个数据对象-->
<el-form
:rules=
"rules"
ref=
"uploadForm"
:model=
"uploadForm"
class=
"uploadContainer"
>
<h3
class=
"uploadTitle"
>
题库上传
</h3>
<!--3.prop的值与rules里面要验证的字段值是对应的,在对应的标签上我们让prop等于rules里面对应的字段值-->
<el-form-item
prop=
"name"
>
<el-input
type=
"text"
auto-complete=
"false"
v-model=
"uploadForm.name"
placeholder=
"请输入竞赛名称"
></el-input>
</el-form-item>
<el-form-item
prop=
"value"
>
<el-select
v-model=
"uploadForm.value"
filterable
placeholder=
"请选择竞赛类别"
>
<el-option
v-for=
"item in uploadForm.options"
:key=
"item.value"
:label=
"item.label"
:value=
"item.value"
>
</el-option>
</el-select>
</el-form-item>
<!--5.@click绑定了一个点击事件-->
<el-button
type=
"primary"
style=
"width: 100%"
@
click=
"submit"
>
上传题库
</el-button
>
</el-form>
<el-dialog
title=
"提示"
:visible.sync=
"dialogVisible"
width=
"30%"
>
<span>
<el-upload
class=
"upload-demo"
ref=
"upload"
drag
action=
"http://localhost:8085/upload2"
multiple
:auto-upload=
"false"
:limit=
"5"
:on-success=
"handleFilUploadSuccess"
:on-remove=
"handleRemove"
:headers=
"Myhead"
:data=
"
{ competitionName: uploadForm.name, type: uploadForm.value }"
>
<i
class=
"el-icon-upload"
></i>
<div
class=
"el-upload__text"
>
将文件拖到此处,或
<em>
点击上传
</em></div>
<div
class=
"el-upload__tip"
slot=
"tip"
>
文件大小不超过20MB
</div>
</el-upload>
</span>
<span
slot=
"footer"
class=
"dialog-footer"
>
<el-button
@
click=
"dialogVisible = false"
>
取 消
</el-button>
<el-button
type=
"primary"
@
click=
"handleUpload"
>
确 定
</el-button>
</span>
</el-dialog>
</div>
</
template
>
<
script
>
export
default
{
name
:
"
Upload
"
,
data
()
{
return
{
dialogVisible
:
false
,
uploadForm
:
{
name
:
""
,
options
:
[
{
value
:
"
工科
"
,
label
:
"
工科
"
,
},
{
value
:
"
理科
"
,
label
:
"
理科
"
,
},
{
value
:
"
文体
"
,
label
:
"
文体
"
,
},
{
value
:
"
商科
"
,
label
:
"
商科
"
,
},
{
value
:
"
综合
"
,
label
:
"
综合
"
,
},
],
value
:
""
,
},
//2.我们把要进行验证的字段都放进rules对象里
rules
:
{
name
:
[{
required
:
true
,
message
:
"
请输入竞赛名称
"
,
trigger
:
"
blur
"
}],
value
:
[
{
required
:
true
,
message
:
"
请选择竞赛类别
"
,
trigger
:
"
change
"
},
],
},
};
},
computed
:
{
Myhead
:
function
()
{
return
{
token
:
localStorage
.
token
,
userid
:
localStorage
.
userId
};
},
},
methods
:
{
//6.点击事件
submit
()
{
//7.
//这里refs.后面的loginForm与el-form表单中的ref属性值是对应的
//validate:对整个表单进行校验的方法,参数为一个回调函数。这里给了一个返回值valid,为Boolean类型,表示校验是否成功
this
.
$refs
.
uploadForm
.
validate
((
valid
)
=>
{
if
(
valid
)
{
this
.
handleUpdate
();
// this.$message({
// message: "上传成功!",
// type: "success",
// });
}
// else {
// this.$message.error("上传失败!");
// return false;
// }
});
},
handleRemove
(
file
,
fileList
)
{
console
.
log
(
file
,
fileList
);
},
submitUpload
()
{
this
.
$refs
.
upload
.
submit
();
},
// 文件上传成功时的函数
handleFilUploadSuccess
(
res
,
file
,
fileList
)
{
console
.
log
(
res
,
file
,
fileList
);
this
.
$message
.
success
(
"
上传成功
"
);
},
handleUpdate
()
{
this
.
dialogVisible
=
true
;
},
// 处理文件上传的函数
handleUpload
()
{
// console.log(res,file)
this
.
submitUpload
();
this
.
dialogVisible
=
false
;
},
},
};
</
script
>
<
style
scoped
>
.uploadContainer
{
border-radius
:
15px
;
background-clip
:
padding-box
;
margin
:
180px
auto
;
padding
:
15px
35px
;
background
:
white
;
border
:
1px
solid
#eaeaea
;
box-shadow
:
0
0
25px
#cac6c6
;
width
:
350px
;
}
.uploadTitle
{
margin
:
2px
auto
20px
auto
;
text-align
:
center
;
}
.rememberMe
{
width
:
100%
;
margin
:
9px
auto
;
}
</
style
>
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录