Update contentOperation.vue

src/views/contentManager/contentOperation.vue

@@ -107,9 +107,25 @@
                :rules="dialogFormRules">
         <el-form-item label="封面图地址"
                       label-width="90px">
-          <el-input v-model="dialogForm.poster"
+          <!-- <el-input v-model="dialogForm.poster"
                     style="width: 100%;"
-                    autocomplete="off"></el-input>
+                    autocomplete="off"></el-input> -->
+          <el-upload class="avatar-uploader"
+                     style="line-height: 0;display: inline-block"
+                     action="/api-web/uploadFile"
+                     :headers="headers"
+                     :show-file-list="false"
+                     v-loading="uploadImgLoading"
+                     accept=".jpg, .jpeg, .png"
+                     :on-success="handleImgSuccess"
+                     :on-error="handleUploadImgError"
+                     :before-upload="beforeImgUpload">
+            <img v-if="dialogForm.poster"
+                 :src="dialogForm.poster"
+                 class="avatar" />
+            <i v-else
+               class="el-icon-plus avatar-uploader-icon"></i>
+          </el-upload>
         </el-form-item>
         <el-form-item label="视频类型"
                       label-width="90px">
@@ -295,6 +311,7 @@ export default {
         videoUrl: null
       },
       uploadLoading: false,
+      uploadImgLoading: false,
       fileList: [],
       dialogFormRules: {
         url: [{ required: true, message: "请输入视频地址", trigger: "blur" }],
@@ -534,6 +551,33 @@ export default {
         });
       }
     },
+    handleUploadImgError(file) {
+      this.uploadImgLoading = false
+      this.$message.error('上传失败')
+    },
+    handleImgSuccess(res, file) {
+      this.uploadImgLoading = false
+      this.dialogForm.poster = res.data.url
+    },
+    beforeImgUpload (file) {
+      const imageType = {
+        "image/png": true,
+        "image/jpeg": true
+      };
+      const isImage = imageType[file.type];
+      const isLt2M = file.size / 1024 / 1024 < 2;
+      console.log(isImage, isLt2M)
+      if (!isImage) {
+        this.$message.error("只能上传图片格式!");
+      }
+      if (!isLt2M) {
+        this.$message.error("上传图片大小不能超过 2MB!");
+      }
+      if(isImage && isLt2M) {
+        this.uploadImgLoading = true
+      }
+      return isImage && isLt2M;
+    },
     handleAvatarSuccess (res, file) {
       this.form.coverImage = res.data.url;
     },
@@ -549,7 +593,7 @@ export default {
         this.$message.error("只能上传图片格式!");
       }
       if (!isLt2M) {
-        this.$message.error("上传头像图片大小不能超过 2MB!");
+        this.$message.error("上传图片大小不能超过 2MB!");
       }
       return isImage && isLt2M;
     },