PC端内容管理新增图片上传功能

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

@@ -21,6 +21,22 @@
                      clearable>
         </el-cascader>
       </el-form-item>
+      <el-form-item prop="imgUrl"
+                    v-loading="loading"
+                    label="索引图">
+        <el-upload class="avatar-uploader"
+                   :action="uploadUrl"
+                   :show-file-list="false"
+                   :on-success="handleAvatarSuccess"
+                   :on-error="handelError"
+                   :before-upload="beforeAvatarUpload">
+          <img v-if="dataForm.imgUrl"
+               :src="dataForm.imgUrl"
+               class="avatar">
+          <i v-else
+             class="el-icon-plus avatar-uploader-icon"></i>
+        </el-upload>
+      </el-form-item>
       <el-form-item label="标题"
                     prop="noticeTitle">
         <el-input v-model="dataForm.noticeTitle"
@@ -76,6 +92,7 @@ export default {
         noticeContent: '',
         allDeptIdsShow: [],
         allTypeId:[],
+        imgUrl: ''
       },
       value: '',
       // 富文本
@@ -101,6 +118,7 @@ export default {
       gridList: [],
       options: [],
       moduleOptions:[],
+      loading: false
     }
   },
   computed: {
@@ -165,6 +183,18 @@ export default {
         }
       })
     },
+    handleAvatarSuccess (res, file) {
+      this.loading = false
+      this.dataForm.imgUrl = res.data.url
+      this.btnAble = false
+    },
+    beforeAvatarUpload (file) {
+      this.loading = true
+      this.btnAble = true
+    },
+    handelError () {
+      this.loading = false
+    },
     // 上传图片之前 (富文本)
     uploadBeforeUploadHandle (file) {
       if (file.type !== 'image/jpg' && file.type !== 'image/jpeg' && file.type !== 'image/png' && file.type !== 'image/gif') {
@@ -233,7 +263,6 @@ export default {
     },
     // 表单提交
     dataFormSubmitHandle: debounce(function () {
-      console.log(this.dataForm.noticeContent)
       if (this.dataForm.noticeContent != null && this.dataForm.noticeContent !== undefined) {
         this.dataForm.noticeContent = this.removeHTMLTag(this.dataForm.noticeContent)
         if ((this.dataForm.noticeContent).length > 10000) {
@@ -311,3 +340,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: 100px;
+  height: 100px;
+  line-height: 100px;
+  text-align: center;
+}
+.avatar {
+  width: 100px;
+  height: 100px;
+  display: block;
+}
+</style>