添加图片预览

src/views/activity/activityadd.vue

@@ -84,8 +84,17 @@
           :show-file-list="false"
           :on-success="handleAvatarSuccess"
           :before-upload="beforeAvatarUpload"
+          :disabled="uploaddisable"
         >
-          <img v-if="imageUrl" :src="imageUrl" class="avatar">
+<!--          <img v-if="imageUrl" :src="imageUrl" class="avatar">-->
+          <div v-if="imageUrl" style="position: relative">
+            <i class="el-icon-error" style="position: absolute;top: 5px;right: 5px;color: #efefef;z-index: 999" @click="handleRemove" />
+            <el-image
+              class="avatar"
+              :src="imageUrl"
+              :preview-src-list="srcList"
+            />
+          </div>
           <div v-else class="upload-trademark">
             <i class="el-icon-plus" style="width: 20px;height: 20px;margin-top: 10px;" />
             <div class="upload-trademark-title">上传图片</div>
@@ -209,6 +218,7 @@ export default {
       manageLoading: false,
       // 活动性质默认值
       style: 0,
+      uploaddisable: false,
       // 父组件传回的类型值
       type: this.$route.query.type,
       // 判断园区活动跳新增还是商家活动跳新增
@@ -308,6 +318,13 @@ export default {
       }
       return isJPG && isLt2M
     },
+    handleRemove(file, fileList) {
+      console.log(file, fileList)
+      this.imageUrl = ''
+      setTimeout(() => {
+        this.uploaddisable = false
+      }, 500)
+    },
     upload(file) {
       const formData = new FormData()
       formData.append('file', file.file)
@@ -319,6 +336,9 @@ export default {
         console.log(`res`, res)
         if (res.code === 200) {
           this.imageUrl = res.data.url
+          this.uploaddisable = true
+          this.srcList = []
+          this.srcList.push(this.imageUrl)
           this.imgid = res.data.businessId
         }
       })

src/views/business/businessadd.vue

@@ -46,13 +46,21 @@
           action="#"
           :http-request="upload"
           :on-preview="handlePreview"
-          :on-remove="handleRemove"
+          :on-remove="handleRemove1"
           :file-list="fileList"
           :show-file-list="false"
           :limit="1"
           list-type="picture"
+          :disabled="uploaddisable1"
         >
-          <img v-if="imgUrl" :src="imgUrl" class="avatar">
+          <div v-if="imgUrl" style="position: relative">
+            <i class="el-icon-error" style="position: absolute;top: 5px;right: 5px;color: #efefef;z-index: 999" @click="handleRemove1" />
+            <el-image
+              class="avatar"
+              :src="imgUrl"
+              :preview-src-list="srcList1"
+            />
+          </div>
           <!--            <el-button size="small" type="primary">点击上传</el-button>-->
           <div v-if="!imgUrl" class="upload-trademark">
             <i class="el-icon-plus" style="width: 20px;height: 20px;margin-top: 10px;" />
@@ -69,10 +77,18 @@
           :on-remove="handleRemove"
           :file-list="imageFileList"
           :show-file-list="false"
+          :disabled="uploaddisable"
           list-type="picture"
           :limit="1"
         >
-          <img v-if="imgageUrl" :src="imgageUrl" class="avatar">
+          <div v-if="imgageUrl" style="position: relative">
+            <i class="el-icon-error" style="position: absolute;top: 5px;right: 5px;color: #efefef;z-index: 999" @click="handleRemove" />
+            <el-image
+              class="avatar"
+              :src="imgageUrl"
+              :preview-src-list="srcList"
+            />
+          </div>
           <!--            <el-button size="small" type="primary">点击上传</el-button>-->
           <div v-if="!imgageUrl" class="upload-trademark">
             <i class="el-icon-plus" style="width: 20px;height: 20px;margin-top: 10px;" />
@@ -110,7 +126,11 @@ export default {
       type: this.$route.query.type,
       // 文件列表
       fileList: [],
+      uploaddisable: false,
+      uploaddisable1: false,
       imageFileList: [],
+      srcList: [],
+      srcList1: [],
       // 表单校验
       rules: {
         name: [
@@ -154,16 +174,24 @@ export default {
       queryDetailById(id).then(res => {
         if (res.code === 200) {
           this.form = res.data
-          this.imgUrl = baseURL + this.form.imgUrl
+          // this.imgUrl = baseURL + this.form.imgUrl
           if (this.form.imgUrl === null) {
             this.imgUrl = baseURL + '/static/images/login/denglu_icon_logo.png'
+            this.srcList1 = []
+            this.srcList1.push(this.imgUrl)
           } else {
             this.imgUrl = baseURL + this.form.imgUrl
+            this.srcList1 = []
+            this.srcList1.push(this.imgUrl)
           }
           if (this.form.imageUrl === null) {
             this.imgageUrl = baseURL + '/static/images/login/denglu_icon_logo.png'
+            this.srcList = []
+            this.srcList.push(this.imgageUrl)
           } else {
             this.imgageUrl = baseURL + this.form.imageUrl
+            this.srcList = []
+            this.srcList.push(this.imgageUrl)
           }
           console.log('form', this.form)
         }
@@ -180,9 +208,9 @@ export default {
         img.onload = function() {
           const width = this.width
           const height = this.height
-          console.log('width',width)
+          console.log('width', width)
           // 检查图片比例是否为314x192
-          if (width / height === 165/192) {
+          if (width / height === 165 / 192) {
             resolve(file)
           } else {
             console.log('请上传比例为165x192的图片')
@@ -228,7 +256,10 @@ export default {
       activityupload(formData).then(res => {
         console.log('res', res)
         if (res.code === 200) {
+          this.uploaddisable = true
           this.imgageUrl = res.data.url
+          this.srcList = []
+          this.srcList.push(this.imgageUrl)
           this.form.image = res.data.businessId
         }
       })
@@ -242,19 +273,34 @@ export default {
         console.log('res', res)
         if (res.code === 200) {
           this.imgUrl = res.data.url
+          this.uploaddisable1 = true
+          this.srcList1 = []
+          this.srcList1.push(this.imgUrl)
           this.form.img = res.data.businessId
         }
       })
     },
     handleRemove(file, fileList) {
       console.log(file, fileList)
+      this.imageFileList = []
+      this.imgageUrl = ''
+      setTimeout(() => {
+        this.uploaddisable = false
+      }, 500)
+    },
+    handleRemove1() {
+      this.fileList = []
+      this.imgUrl = ''
+      setTimeout(() => {
+        this.uploaddisable1 = false
+      }, 500)
     },
     handlePreview(file) {
       console.log(file)
       this.$dialog.image({
         src: file.url,
         alt: file.name
-      });
+      })
     },
     // 提交按钮
     submitForm() {