修改上传组件样式

.env.production

@@ -2,7 +2,8 @@
 ENV = 'production'
 
 # base api
-VUE_APP_BASE_API = '/prod-api'
+# VUE_APP_BASE_API = '/prod-api'
+VUE_APP_BASE_API = 'http://192.168.2.68:8012'
 
 # 文件上传
 VUE_APP_UPLOAD_API='https://zplma-b.caimei365.com'

src/views/supplier/components/upload.vue

@@ -1,36 +0,0 @@
-<template>
-  <div>
-    <el-upload
-      ref="uploadFile"
-      class="upload-demo"
-      drag
-      :action="action"
-      multiple
-      :limit="1"
-    >
-      <i class="el-icon-upload" />
-      <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
-      <!-- <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div> -->
-    </el-upload>
-  </div>
-</template>
-
-<script>
-export default {
-  props: {
-    limit: {
-      type: Number,
-      default: 1
-    }
-  },
-  data() {
-    return {
-
-    }
-  },
-  methods: {
-
-  }
-}
-</script>
-

src/views/supplier/components/uploadFile.vue

@@ -10,6 +10,9 @@
       :auto-upload="false"
       :on-success="success"
       :accept="accept"
+      :on-change="handleChange"
+      :class="{hidden:!showUpload}"
+      :on-remove="handleRemove"
     >
       <el-button slot="trigger" size="mini" type="primary">选取文件</el-button>
       <el-button style="margin-left: 10px;" size="mini" type="success" @click="uploadFile">上传</el-button>
@@ -35,7 +38,8 @@ export default {
       // 请求参数
       params: {
         authUserId: this.$store.getters.authUserId
-      }
+      },
+      showUpload: true
     }
   },
   methods: {
@@ -47,6 +51,17 @@ export default {
     },
     uploadFile() {
       this.$refs.upload.submit()
+    },
+    handleChange(file, fileList) {
+      console.log(fileList)
+      if (fileList === 0) {
+        this.showUpload = true
+      } else {
+        this.showUpload = false
+      }
+    },
+    handleRemove(file, fileList) {
+      this.showUpload = true
     }
   }
 }

src/views/supplier/components/uploadImage.vue

@@ -10,7 +10,10 @@
       :accept="accept"
       :auto-upload="true"
       :on-success="success"
+      :on-remove="handleRemove"
       :file-list="fileList"
+      :on-change="handleChange"
+      :class="{hidden:!showUpload}"
     >
       <i class="el-icon-plus" />
     </el-upload>
@@ -35,7 +38,8 @@ export default {
       dialogVisible: false,
       // 文件上传请求接口
       action: process.env.VUE_APP_UPLOAD_API + '/upload/image',
-      accept: '.jpg,.png,.gif'
+      accept: '.jpg,.png,.gif',
+      showUpload: true
     }
   },
   methods: {
@@ -59,6 +63,17 @@ export default {
         this.$message.warning('文件上传大小超出限制(≤1MB)')
         return false
       }
+    },
+    handleChange(file, fileList) {
+      console.log(fileList)
+      if (fileList === 0) {
+        this.showUpload = true
+      } else {
+        this.showUpload = false
+      }
+    },
+    handleRemove(file, fileList) {
+      this.showUpload = true
     }
   }
 }