文章管理 设备文章 添加背景图和分享图

src/views/article/list/detail.vue

@@ -10,9 +10,15 @@
       <el-form-item label="文章标题：" prop="title">
         <el-input v-model="form.title" placeholder="请输入文章标题" />
       </el-form-item>
+      <el-form-item label="背景图：" prop="pic">
+        <Upload listType="picture-card" :url="form.pic" @upload="upload($event, 'pic')" />
+      </el-form-item>
       <el-form-item label="文章内容：" prop="content">
         <Editor v-model="form.content" :min-height="250" />
       </el-form-item>
+      <el-form-item label="分享图：" prop="shareIcon">
+        <Upload listType="picture-card" :url="form.shareIcon" @upload="upload($event, 'shareIcon')" />
+      </el-form-item>
       <el-form-item label="文章状态：" prop="status" v-if="this.form.id">
         <el-select v-model="form.status" placeholder="请选择文章状态">
           <el-option v-for="item in statusOptions" :key="item.value" :label="item.label"
@@ -31,11 +37,13 @@
 import { create, detail, edit } from '@/api/article/list'
 import { devMixin } from '@/mixin/index'
 import { statusMixin } from './mixin'
-import Editor from "@/components/Editor/index"
+import Editor from '@/components/Editor/index'
+import Upload from '@/components/Upload/index.vue'
 export default {
   mixins: [devMixin, statusMixin],
   components: {
-    Editor
+    Editor,
+    Upload
   },
   data() {
     return {
@@ -51,9 +59,15 @@ export default {
         title: [{
           required: true, message: '请输入文章标题', trigger: 'blur'
         }],
+        pic: [{
+          required: true, message: '请上传文章背景图', trigger: 'change'
+        }],
         content: [{
           required: true, message: '请输入文章内容', trigger: 'blur'
         }],
+        shareIcon: [{
+          required: true, message: '请上传文章分享图', trigger: 'change'
+        }],
         status: [{
           required: true, message: '请选择文章状态', trigger: 'change'
         }]
@@ -78,6 +92,12 @@ export default {
         }
       })
     },
+
+    // 上传
+    upload(e, key) {
+      this.form[key] = e.file
+    },
+
     // 提交
     getSubmit() {
       this.$refs.form.validate((valid) => {