发表于： 2019-09-28 22:46:55
1 778
今天完成的事情：
1.今天把增加写出来了，也成功添加了图片，但是是用的element的组件添加的图片，还是需要学习如何使用原生写添加图片并上传。
<template>
<div id="increase">
<p>新增Article</p>
<div>
<span>标题名称</span>
<input type="text" v-model="obj.title" />
<span>类型</span>
<el-select v-model="type.value" placeholder="请选择">
<el-option v-for="item in type" :key="item.value" :label="item.label" :value="item.value"></el-option>
</el-select>
<span>跳转链接</span>
<input type="text" v-model="obj.url" />
<div>
<span>配图</span>
<el-upload
action="/api/a/u/img/{module}"
list-type="picture-card"
:on-success="handleAvatarSuccess"
:on-remove="handleRemove"
:before-remove="beforeRemove"
>
<i class="el-icon-plus"></i>
</el-upload>
</div>
<!-- <div class="png-name">
<span>图片名</span>
<span>文件大小</span>
<span>进度</span>
<span>操作</span>
<span>操作</span>
</div>-->
<div>
<input type="button" value="立即上线" @click="addImg()" />
<input type="button" value="存为草稿" />
<router-link to="/hom/pass">
<input type="button" value="取消" />
</router-link>
</div>
</div>
</div>
</template>
<script>
export default {
name: "increase",
data() {
return {
imageUrl: "",
imgUrl: "",
obj: {
title: "",
status: "",
img: "this.dialogImageUrl",
url: ""
},
type: [
{
value: "all",
label: "全部"
},
{
value: 0,
label: "首页banner"
},
{
value: 1,
label: "找职位banner"
},
{
value: 2,
label: "找精英banner"
},
{
value: 3,
label: "行业大图"
}
]
};
},
created() {
this.axios({
url: "/api/a/article/search/",
method: "get",
data: {}
}).then(res => {
console.log(res);
this.obj = res.data.data.articleList;
});
},
methods: {
handleAvatarSuccess(res, file) {
this.imageUrl = URL.createObjectURL(file.raw);
this.imgUrl = res.data.url;
},
handleRemove(file, fileList) {
console.log(file, fileList);
},
beforeRemove(file, fileList) {
return this.$confirm(`确定移除 ${file.name}？`);
},
addImg() {
this.axios({
url: "/api/a/u/article",
method: "post",
data:
"title=" +
this.obj.title +
"&type=" +
this.type.value +
"&status=" +
2 +
"&img=" +
this.imgUrl +
"&url=" +
this.obj.url
})
.then(res => {
console.log(res);
})
.catch(err => {
console.log(err);
});
},
明天计划：
1.把富文本插件运用进来，然后先进行路由守卫的学习，再把编辑功能学习做出来
返回列表
评论