图片回显问题

src/components/Tinymce/components/EditorImage.vue

@@ -43,7 +43,6 @@ export default {
   },
   data() {
     return {
-      action: `${this.baseUrl}/formData/MultiPictareaddData`,
       dialogVisible: false,
       listObj: {},
       fileList: []

src/views/club/editForm.vue

@@ -33,8 +33,10 @@
             :on-success="handleAvatarSuccess"
             :before-upload="beforeUpload"
           >
-            <img v-if="form.businessLicenseImage" :src="form.businessLicenseImage" class="avatar">
-            <i v-else class="el-icon-plus avatar-uploader-icon" />
+            <div v-loading="businessImgLoading" class="avatar">
+              <img v-if="form.businessLicenseImage" :src="form.businessLicenseImage" @error="reloadAvatarImage" @load="loadAvatarSucess">
+              <i v-else class="el-icon-plus avatar-uploader-icon" />
+            </div>
             <div slot="tip" class="el-upload__tip_club">注意：请上传jpg/png格式的图片，最大不超过5M</div>
           </el-upload>
         </div>
@@ -49,8 +51,10 @@
             :on-success="handleDoorwaySuccess"
             :before-upload="beforeUpload"
           >
-            <img v-if="form.headpic" :src="form.headpic" class="avatar">
-            <i v-else class="el-icon-plus avatar-uploader-icon" />
+            <div v-loading="headImgLoading" class="avatar">
+              <img v-if="form.headpic" :src="form.headpic" @error="reloadDoorwayImage" @load="loadDoorwaySucess">
+              <i v-else class="el-icon-plus avatar-uploader-icon" />
+            </div>
             <div slot="tip" class="el-upload__tip_club">注意：请上传jpg/png格式的图片，最大不超过5M</div>
           </el-upload>
         </div>
@@ -76,12 +80,13 @@ export default {
   components: { City },
   data() {
     return {
-      action: `${this.baseUrl}/formData/MultiPictareaddData`,
       userID: this.$route.query.userID,
       clubID: this.$route.query.clubID,
       dialogImageUrl: '',
       dialogVisible: false,
       isRequest: false,
+      businessImgLoading: false,
+      headImgLoading: false,
       form: {
         name: '',
         linkMan: '',
@@ -195,14 +200,33 @@ export default {
     },
     // 上传图标事件
     handleAvatarSuccess(response, file) {
-      setTimeout(() => {
+      this.$nextTick(() => {
         this.form.businessLicenseImage = response.data
-      }, 1000)
+      })
     },
-    handleDoorwaySuccess(response, file) {
+    reloadAvatarImage() {
+      this.businessImgLoading = true
       setTimeout(() => {
+        this.form.businessLicenseImage = this.form.businessLicenseImage.split('?')[0] + '?r=' + Math.floor(Math.random() * 1000)
+      }, 1000 * 2)
+    },
+    loadAvatarSucess() {
+      this.businessImgLoading = false
+    },
+    // 上传图标事件
+    handleDoorwaySuccess(response, file) {
+      this.$nextTick(() => {
         this.form.headpic = response.data
-      }, 1000)
+      })
+    },
+    reloadDoorwayImage() {
+      this.headImgLoading = true
+      setTimeout(() => {
+        this.form.headpic = this.form.headpic.split('?')[0] + '?r=' + Math.floor(Math.random() * 1000)
+      }, 1000 * 2)
+    },
+    loadDoorwaySucess() {
+      this.headImgLoading = false
     },
     // 对上传图片的大小、格式进行限制
     beforeUpload(file) {
@@ -246,6 +270,11 @@ export default {
   height: 148px;
   display: block;
 }
+.avatar img {
+  width: 148px;
+  height: 148px;
+  display: block;
+}
 .el-form-item__label{
     text-align: right !important;
 }

src/views/club/form.vue

@@ -34,8 +34,10 @@
             :on-success="handleAvatarSuccess"
             :before-upload="beforeUpload"
           >
-            <img v-if="form.businessLicenseImage" :src="form.businessLicenseImage" class="avatar">
-            <i v-else class="el-icon-plus avatar-uploader-icon" />
+            <div v-loading="businessImgLoading" class="avatar">
+              <img v-if="form.businessLicenseImage" :src="form.businessLicenseImage" @error="reloadAvatarImage" @load="loadAvatarSucess">
+              <i v-else class="el-icon-plus avatar-uploader-icon" />
+            </div>
             <div slot="tip" class="el-upload__tip_club">注意：请上传jpg/png格式的图片，最大不超过5M</div>
           </el-upload>
         </div>
@@ -50,8 +52,10 @@
             :on-success="handleDoorwaySuccess"
             :before-upload="beforeUpload"
           >
-            <img v-if="form.headpic" :src="form.headpic" class="avatar">
-            <i v-else class="el-icon-plus avatar-uploader-icon" />
+            <div v-loading="headImgLoading" class="avatar">
+              <img v-if="form.headpic" :src="form.headpic" @error="reloadDoorwayImage" @load="loadDoorwaySucess">
+              <i v-else class="el-icon-plus avatar-uploader-icon" />
+            </div>
             <div slot="tip" class="el-upload__tip_club">注意：请上传jpg/png格式的图片，最大不超过5M</div>
           </el-upload>
         </div>
@@ -111,6 +115,8 @@ export default {
         cityID: '',
         townID: ''
       },
+      businessImgLoading: false,
+      headImgLoading: false,
       isAddress: false,
       loadingbut: false,
       loadingbuttext: '保存'
@@ -140,14 +146,33 @@ export default {
     },
     // 上传图标事件
     handleAvatarSuccess(response, file) {
-      setTimeout(() => {
+      this.$nextTick(() => {
         this.form.businessLicenseImage = response.data
-      }, 1000)
+      })
     },
-    handleDoorwaySuccess(response, file) {
+    reloadAvatarImage() {
+      this.businessImgLoading = true
       setTimeout(() => {
+        this.form.businessLicenseImage = this.form.businessLicenseImage.split('?')[0] + '?r=' + Math.floor(Math.random() * 1000)
+      }, 1000 * 2)
+    },
+    loadAvatarSucess() {
+      this.businessImgLoading = false
+    },
+    // 上传图标事件
+    handleDoorwaySuccess(response, file) {
+      this.$nextTick(() => {
         this.form.headpic = response.data
-      }, 1000)
+      })
+    },
+    reloadDoorwayImage() {
+      this.headImgLoading = true
+      setTimeout(() => {
+        this.form.headpic = this.form.headpic.split('?')[0] + '?r=' + Math.floor(Math.random() * 1000)
+      }, 1000 * 2)
+    },
+    loadDoorwaySucess() {
+      this.headImgLoading = false
     },
     // 对上传图片的大小、格式进行限制
     beforeUpload(file) {
@@ -224,6 +249,11 @@ export default {
   height: 148px;
   display: block;
 }
+.avatar img {
+  width: 148px;
+  height: 148px;
+  display: block;
+}
 .el-form-item__label{
     text-align: right !important;
 }

src/views/goods/category-create.vue

@@ -21,8 +21,10 @@
             :on-success="handleSuccess"
             :before-upload="beforeUpload"
           >
-            <img v-if="temp.classifyImage" :src="temp.classifyImage" class="avatar">
-            <i v-else class="el-icon-plus avatar-uploader-icon" />
+            <div v-loading="loadImgLoading" class="avatar">
+              <img v-if="temp.classifyImage" :src="temp.classifyImage" @error="reloadImage" @load="loadSucess">
+              <i v-else class="el-icon-plus avatar-uploader-icon" />
+            </div>
             <div slot="tip" class="el-upload__tip">注意：请上传jpg/png格式的图片，最大不超过5M</div>
           </el-upload>
         </div>
@@ -57,7 +59,6 @@ export default {
   data() {
     return {
       msg: '添加分类',
-      action: `${this.baseUrl}/formData/MultiPictareaddData`,
       activeIndex: '2',
       rules: {
         classifyName: [{ required: true, message: '分类名称不能为空', trigger: 'blur' }],
@@ -67,6 +68,7 @@ export default {
         postage: [{ required: true, message: '请选择邮费是否到付', trigger: 'change' }],
         status: [{ required: true, message: '请选择状态', trigger: 'change' }]
       },
+      loadImgLoading: false,
       temp: {
         id: '',
         organizeID: this.$store.getters.organizeID,
@@ -110,9 +112,18 @@ export default {
     },
     // 上传图标事件
     handleSuccess(response, file) {
-      setTimeout(() => {
+      this.$nextTick(() => {
         this.temp.classifyImage = response.data
-      }, 1000)
+      })
+    },
+    reloadImage() {
+      this.loadImgLoading = true
+      setTimeout(() => {
+        this.temp.classifyImage = this.temp.classifyImage.split('?')[0] + '?r=' + Math.floor(Math.random() * 1000)
+      }, 1000 * 2)
+    },
+    loadSucess() {
+      this.loadImgLoading = false
     },
     // 对上传图片的大小、格式进行限制
     beforeUpload(file) {
@@ -169,6 +180,11 @@ export default {
   height: 148px;
   display: block;
 }
+.avatar img {
+  width: 148px;
+  height: 148px;
+  display: block;
+}
 .el-form-item__label{
     text-align: right !important;
 }

src/views/goods/category-edit.vue

@@ -21,8 +21,10 @@
             :on-success="handleSuccess"
             :before-upload="beforeUpload"
           >
-            <img v-if="temp.classifyImage" :src="temp.classifyImage" class="avatar">
-            <i v-else class="el-icon-plus avatar-uploader-icon" />
+            <div v-loading="loadImgLoading" class="avatar">
+              <img v-if="temp.classifyImage" :src="temp.classifyImage" @error="reloadImage" @load="loadSucess">
+              <i v-else class="el-icon-plus avatar-uploader-icon" />
+            </div>
             <div slot="tip" class="el-upload__tip">注意：请上传jpg/png格式的图片，最大不超过5M</div>
           </el-upload>
         </div>
@@ -56,7 +58,6 @@ import { getClassify, saveClassify } from '@/api/goods-classify'
 export default {
   data() {
     return {
-      action: `${this.baseUrl}/formData/MultiPictareaddData`,
       msg: '编辑分类',
       activeIndex: '2',
       rules: {
@@ -67,6 +68,7 @@ export default {
         postage: [{ required: true, message: '请选择邮费是否到付', trigger: 'change' }],
         status: [{ required: true, message: '请选择状态', trigger: 'change' }]
       },
+      loadImgLoading: false,
       temp: {
         id: '',
         organizeID: this.$store.getters.organizeID,
@@ -121,9 +123,18 @@ export default {
     },
     // 上传图标事件
     handleSuccess(response, file) {
-      setTimeout(() => {
+      this.$nextTick(() => {
         this.temp.classifyImage = response.data
-      }, 1000)
+      })
+    },
+    reloadImage() {
+      this.loadImgLoading = true
+      setTimeout(() => {
+        this.temp.classifyImage = this.temp.classifyImage.split('?')[0] + '?r=' + Math.floor(Math.random() * 1000)
+      }, 1000 * 2)
+    },
+    loadSucess() {
+      this.loadImgLoading = false
     },
     // 对上传图片的大小、格式进行限制
     beforeUpload(file) {
@@ -177,6 +188,11 @@ export default {
     height: 148px;
     display: block;
   }
+  .avatar img {
+    width: 148px;
+    height: 148px;
+    display: block;
+  }
   .el-form-item__label{
       text-align: right !important;
   }