<template>
<div>
<!-- 输入框新增演员名单 -->
<el-form
:inline="true"
class="demo-form-inline"
:rules="rules"
:model="form"
ref="form"
>
<el-form-item label="演员姓名" prop="name">
<el-input v-model="form.name"></el-input>
</el-form-item>
<br />
<!-- 上传头像 -->
<el-form-item label="演员头像" prop="avatar">
<el-upload
class="avatar-uploader"
:action="`${UPLOADURL}/upload`"
:show-file-list="false"
:on-success="handleAvatarSuccess"
:before-upload="beforeAvatarUpload"
>
<img v-if="this.form.avatar" :src="this.form.avatar" class="avatar" />
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
</el-form-item>
<br />
<!-- 提交按钮,取消按钮 -->
<el-form-item>
<el-button type="primary" @click="insertactor">新增</el-button>
<el-button type="danger">取消</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
//引入封装的httpApi
import httpApi from "@/http/index.js";
export default {
data() {
return {
form: {
name: "", //存储用户输入框中输入的值
avatar: "", //存储图片地址
},
//表单验证规则
rules: {
name: [
{ required: true, message: "必填", triggered: "blur" },
// {
// pattern: /^\d{6}$/,
// message: "密码为六位数字",
// trigger: "blur",
// },
],
avatar: [{ required: true, message: "必填", triggered: "blur" }],
},
};
},
methods: {
insertactor() {
//点击新增按钮后验证整个表单
this.$refs.form.validate((valid) => {
if (valid) {
console.log("验证通过");
//如果表单验证通过则发送接口请求添加演员数据
let names = this.form.name;
let avatars = this.form.avatar;
httpApi.ActorApi.add({ actorName: names, actorAvatar: avatars }).then(
(res) => {
console.log(res);
//判断如果res.data.code=200则弹窗提示上传成功否则上传失败
if (res.data.code == 200) {
//消息提示框**************element组件
this.$message({
message: "恭喜你,演员添加成功",
type: "success",
});
//将表单中的信息重置
this.$refs["form"].resetFields();
} else {
alert("文件上传失败");
}
}
);
} else {
console.log("验证不通过");
}
});
},
//文件上传部分处理*************************
handleAvatarSuccess(res, file) {
this.imageUrl = URL.createObjectURL(file.raw);
console.log(res);
//文件上传成功后路径存储在res.data中,把这个值赋值给avatar请求接口新增
this.form.avatar = res.data;
},
//处理文件上传之前的文件验证
beforeAvatarUpload(file) {
const isJPG = file.type === "image/png";
const isLt2M = file.size / 1024 / 1024 < 20;
if (!isJPG) {
this.$message.error("上传头像图片只能是 JPG 格式!");
}
if (!isLt2M) {
this.$message.error("上传头像图片大小不能超过 2MB!");
}
return isJPG && isLt2M;
},
},
};
</script>
<style lang="scss" scoped></style>
<style>
.avatar-uploader .el-upload {
border: 1px dashed #d9d9d9;
border-radius: 6px;
cursor: pointer;
position: relative;
overflow: hidden;
}
.avatar-uploader .el-upload:hover {
border-color: #409eff;
}
.avatar-uploader-icon {
font-size: 28px;
color: #8c939d;
width: 178px;
height: 178px;
line-height: 178px;
text-align: center;
}
.avatar {
width: 178px;
/* height: 178px; */
display: block;
}
</style>