栏目管理添加图片

src/views/modules/news/moduletype-add-or-update.vue

@@ -7,6 +7,23 @@
 <!--          <el-form-item label="所有上级ID 逗号分隔" prop="pids">-->
 <!--          <el-input v-model="dataForm.pids" placeholder="所有上级ID 逗号分隔"></el-input>-->
 <!--      </el-form-item>-->
+        <el-form-item label="栏目图片"
+                      v-loading="loading"
+                      prop="imgUrl">
+            <el-upload class="avatar-uploader"
+                       :action="uploadUrl"
+                       :show-file-list="false"
+                       :on-success="handleAvatarSuccess"
+                       :before-upload="beforeAvatarUpload">
+                <img v-if="dataForm.imgUrl"
+                     :src="dataForm.imgUrl"
+                     class="avatar">
+                <i v-else
+                   class="el-icon-plus avatar-uploader-icon"></i>
+                <div slot="tip"
+                     class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
+            </el-upload>
+        </el-form-item>
           <el-form-item label="类别名称" prop="typeName">
           <el-input v-model="dataForm.typeName" placeholder="类别名称"></el-input>
       </el-form-item>
@@ -63,6 +80,7 @@
 
 <script>
 import debounce from 'lodash/debounce'
+import Cookies from 'js-cookie'
 export default {
   data () {
     return {
@@ -82,6 +100,8 @@ export default {
         updatedBy: '',
         updatedTime: ''
       },
+        uploadUrl: '',
+        loading: false,
         categoryList: [],
         categoryListVisible: false,
     }
@@ -131,7 +151,20 @@ export default {
       }
     }
   },
+    created () {
+        this.$nextTick(() => {
+            this.uploadUrl = `${window.SITE_CONFIG['apiURL']}/oss/file/upload?token=${Cookies.get('token')}`
+        })
+    },
   methods: {
+      // 上传图片
+      handleAvatarSuccess (res, file) {
+          this.loading = false
+          this.dataForm.imgUrl = res.data.url
+      },
+      beforeAvatarUpload (file) {
+          this.loading = true
+      },
     init () {
       this.visible = true
       this.$nextTick(() => {
@@ -211,3 +244,28 @@ export default {
   }
 }
 </script>
+<style>
+    .avatar-uploader .el-upload {
+        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: 178px;
+        height: 178px;
+        line-height: 178px;
+        text-align: center;
+    }
+    .avatar {
+        width: 178px;
+        height: 178px;
+        display: block;
+    }
+</style>