1.请求接口
//引入axios的配置
import request from '@/utils/request'
export default {
addbanner(pugebanner) {
return request({
url: “后端接口”,
method: "post",
data: pugebanner
})
},
}
2.添加按钮
<!-- 添加按钮 -->
<div class="button">
<el-button type="primary" size="small" @click="adddialogVisible = true"
>添加轮播图</el-button
>
</div>
3.添加对话框
<!-- 添加对话框 -->
<el-dialog
title="添加轮播图"
:visible.sync="adddialogVisible"
width="70%"
@close="addDislogClosed"
>
<!-- 图片标题 -->
<el-form
ref="addFormRef"
:rules="rules"
:model="pugebanner"
label-width="80px"
>
<el-form-item label="图片标题" prop="name">
<el-input v-model="pugebanner.name"></el-input>
</el-form-item>
<!-- 上传轮播图 -->
<el-form-item label="图片上传" prop="bannerUrl">
<el-upload
:show-file-list="false"
:on-success="handleAvatarSuccess"
:before-upload="beforeAvatarUpload"
action="https://www.pugetd.com/lsoss/fileoss"
class="avatar-uploader"
ref="my-upload"
>
<el-button>点击上传</el-button>
</el-upload>
<img :src="pugebanner.bannerUrl" height="200" />
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="adddialogVisible = false">取 消</el-button>
<el-button type="primary" @click="adduser">确 定</el-button>
</span>
</el-dialog>
4.data里
data() {
return {
//全部数据
tableData: [],
// 添加对话框
adddialogVisible: false,
// 添加轮播图表单验证
rules: {
name: [
{ required: true, message: "请输入活动名称", trigger: "blur" },
{
min: 1,
max: 30,
message: "长度在 1 到 30 个字符",
trigger: "blur"
}
]
},
pugebanner: {
bannerUrl:
"",
name: ""
},
// 修改信息
modFrom: {}
};
},
5.methods里
methods:{
// 添加对话框重置操作
addDislogClosed() {
this.$refs.addFormRef.resetFields();
// 上传组件的重置
this.$refs["my-upload"].clearFiles();
},
// 上传成功后
handleAvatarSuccess(response) {
// 把返回的图片路径给到回显部分
this.pugebanner.bannerUrl = response.data.url;
},
// 上传成功前,判断图片大小
beforeAvatarUpload(file) {
const isLt2M = file.size / 1024 / 1024 < 2;
if (!isLt2M) {
this.$message.error("上传头像图片大小不能超过 2MB!");
}
return isLt2M;
},
// 确定按钮
adduser() {
this.$refs.addFormRef.validate(valid => {
if (!valid) return;
bannerApi
.addbanner(this.pugebanner)
.then(() => {
this.$message.success("添加数据成功");
this.getBanner();
})
.catch(() => {
this.$message.error("添加数据失败");
});
this.adddialogVisible = false;
});
},
}
效果图(点击按钮之后弹出添加对话框)
相关内容请浏览《普歌-智音团队 vue后端返回时间,转化为天数》
作者:lihaijin8090
本文源自:lihaijin8090的《普歌-智音团队 Vue用element-ui调用后端API实现添加功能》
本文版权归作者和CSDN共有,欢迎转载,且在文章页面明显位置给出原文链接,未经作者同意必须保留此段声明,否则保留追究法律责任的权利。