添加本封面修改

src/views/wokes/configuration/webconfig.vue

@@ -5,7 +5,25 @@
         <span>站点配置</span>
       </div>
       <div class="main">
-        <naf-form ref="ruleForm" @save="save" :meta="formmeta" :rules="rules" :data="configurationdata"></naf-form>
+        <naf-form ref="ruleForm" @save="save" :meta="formmeta" :rules="rules" :data="configurationdata">
+          <template v-slot:field="{ item }">
+            <!-- 图片上传 -->
+            <el-upload
+              v-if="item.name == 'path'"
+              class="avatar-uploader avatar"
+              action="/api/files/upload"
+              :show-file-list="false"
+              :on-success="handleAvatarSuccess"
+              :before-upload="beforeAvatarUpload"
+              :data="{ type: 'resource' }"
+              :headers="myHeaders"
+              :on-error="imgerror"
+            >
+              <img v-if="imageUrl" :src="imageUrl" class="avatar">
+              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
+            </el-upload>
+          </template>
+        </naf-form>
       </div>
     </el-card>
   </div>
@@ -15,14 +33,18 @@
 import nafForm from '@naf/data/form'
 import { createNamespacedHelpers } from 'vuex'
 const { mapState, mapActions } = createNamespacedHelpers('webconfig')
+const token = sessionStorage.getItem('token')
 export default {
   components: {
     nafForm
   },
   data () {
     return {
+      myHeaders: { Authorization: `Bearer ${token}` },
+      imageUrl: '',
       is_data: {},
       formmeta: [
+        { name: 'path', title: '缩略图', slots: 'field' },
         { name: 'name', title: '网站名称', size: 'medium' },
         { name: 'describe', title: '网站描述', size: 'medium' },
         { name: 'company', title: '单位', size: 'medium' },
@@ -63,7 +85,6 @@ export default {
   methods: {
     ...mapActions(['configurationquery', 'configurationcreate', 'configurationupdate']),
     async save (e) {
-      console.log(e)
       if (this.isNew) {
         // 修改
         const res = await this.configurationupdate(e)
@@ -81,12 +102,38 @@ export default {
           await this.configurationquery()
         }
       }
+    },
+    // 文件上传成功时的钩子
+    handleAvatarSuccess (res, file) {
+      this.is_data = { ...this.$refs.ruleForm.form }
+      this.is_data.path = res.data.path
+      this.$refs.ruleForm.formChage('path', res.data.path)
+      this.imageUrl = URL.createObjectURL(file.raw)
+    },
+    imgerror () {
+      this.$message.error('上传失败')
+    },
+    // 上传文件之前的钩子
+    beforeAvatarUpload (file) {
+      const isJPG = file.type === 'image/jpeg'
+      const isPNG = file.type === 'image/png'
+      const isLt2M = file.size / 1024 / 1024 < 2
+
+      if (!isJPG && !isPNG) {
+        this.$message.error('上传图片只能是 JPG 或 PNG 格式!')
+      }
+      if (!isLt2M) {
+        this.$message.error('上传图片大小不能超过 2MB!')
+      }
+      return (isJPG || isPNG) && isLt2M
     }
   },
   async mounted () {
     const res = await this.configurationquery()
     // eslint-disable-next-line eqeqeq
     if (res.errcode == 0) {
+      console.log(this.configurationdata)
+      this.imageUrl = this.configurationdata.path
       this.$refs.ruleForm.reset()
     }
   },
@@ -110,4 +157,27 @@ export default {
     margin: 0 auto;
   }
 }
+.avatar-uploader {
+  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: 150px;
+  height: 150px;
+  line-height: 150px;
+  text-align: center;
+}
+.avatar {
+  width: 150px;
+  height: 150px;
+  display: block;
+}
 </style>