修改：提取图片输入框组件

src/components/input/JInput.vue

@@ -1,31 +0,0 @@
-<template>
-  <el-tooltip class="item" effect="dark" placement="bottom">
-    <el-input autosize type="textarea" width="100%" v-model="currentValue"></el-input>
-    <div slot="content" v-if="value.length > 0">
-      <el-image v-if="value === 'img'" style="width: 150px;" :src="value" fit="contain"></el-image>
-      <a v-if="value === 'url'" :href="value">{{value}}</a>
-    </div>
-  </el-tooltip>
-</template>
-<script>
-export default {
-  name: 'JInput',
-  props: {
-    value: {
-      type: String,
-      default: ''
-    }
-  },
-  data() {
-    return {
-      currentValue: this.value
-    }
-  },
-  watch: {
-    currentValue(val) {
-      console.log('890')
-      this.$emit("update:value", val);
-    }
-  }
-}
-</script>

src/components/input/UploadImageInput.vue

@@ -0,0 +1,42 @@
+<template>
+  <div>
+    <el-upload
+      action="https://jsonplaceholder.typicode.com/posts/"
+      :show-file-list="false"
+      :limit="1">
+      <el-button size="small" type="text">点击上传</el-button>
+    </el-upload>
+    <el-tooltip class="item" effect="dark" placement="bottom">
+      <el-input :autosize="{ minRows: 2, maxRows: 4}" type="textarea" width="100%" v-model="currentValue" @change="change"></el-input>
+      <div slot="content">
+        <el-image style="width: 150px;" :src="currentValue" fit="contain"></el-image>
+      </div>
+    </el-tooltip>
+  </div>
+</template>
+<script>
+export default {
+  name: 'UploadImageInput',
+  props: {
+    value: {
+      type: String,
+      default: ''
+    }
+  },
+  data() {
+    return {
+      currentValue: this.value
+    }
+  },
+  watch: {
+    value(val) {
+      this.currentValue = val
+    }
+  },
+  methods: {
+    change() {
+      this.$emit('input', this.currentValue)
+    }
+  }
+}
+</script>

src/styles/setting.scss

@@ -55,6 +55,7 @@ a:hover {
 }
 .config-itme-label {
   padding-top: 15px;
+  padding-bottom: 5px;
   font-size: 14px;
   font-weight: 500;
 }

src/views/setting/articles/blogManager.vue

@@ -11,13 +11,11 @@
       </a-affix>
       <el-collapse v-model="activeNames">
         <el-collapse-item title="网站首页背景" name="1">
-          <div class="config-itme-label">站点背景大图：</div>
-          <el-tooltip class="item" effect="dark" placement="bottom" :disabled="!form.categoryBackground || form.categoryBackground.length === 0">
-            <el-input :autosize="{ minRows: 2, maxRows: 4}" type="textarea" width="100%" v-model="form.backgroundSite"></el-input>
-            <div slot="content">
-              <el-image style="width: 150px;" :src="form.backgroundSite" fit="contain"></el-image>
-            </div>
-          </el-tooltip>
+          <div class="config-itme-label">站点背景大图：
+          </div>
+          <upload-image-input
+            v-model="form.backgroundSite"
+          />
           <span class="instruction">在这里填入图片的URL地址, 以在网站首页显示一个背景大图。</span>
           <div class="config-itme-label">首页大图内文字：</div>
           <el-input autosize type="textarea" v-model="form.backgroundTextSite"></el-input>
@@ -103,12 +101,12 @@
 
 import '../../../assets/fontawesome-free-5.11.2-web/css/all.min.css'
 import {getSetting, updateSetting} from '@/api/setting-api'
-import JInput from "@/components/input/JInput";
+import UploadImageInput from "@/components/input/UploadImageInput";
 
 export default {
   name: 'blogManager',
   components: {
-    JInput,
+    UploadImageInput
   },
   data() {
     return {
@@ -136,7 +134,7 @@ export default {
     this.$nextTick(() => {
       const that = this
       setTimeout(function (){
-        that.activeNames = ['2']
+        that.activeNames = ['1']
       },50)
     })
   },