留言板上传图片使用自定义组件删除element组件的上传图片

assets/scss/common.scss

@@ -346,7 +346,101 @@ div.el-tree-node__content{
 .dialog .el-dialog__body{
   padding: 0 !important;
 }
+/*留言板查看*/
+.messageBoard .img-item .preview {
+  display: block;
+  position: absolute;
+  top: 0;
+  right: 0;
+  z-index: 1000;
+  width: 82px;
+  height: 70px;
+  overflow: hidden;
+}
+.messageBoard .img-item .preview img.previewImage{
+  //background: #fff url('/images/all/msg_uploadPic.png')no-repeat center center;
+  //max-height: 68px;
+  //max-width: 80px;
+  //line-height: 68px;
+  //cursor: pointer;
+
+  max-height: 82px;
+  max-width: 70px;
+  cursor: pointer;
+  line-height: 70px;
+  overflow: hidden;
 
+  //width:100%;
+  //height:0;
+  //padding-bottom: 100%;
+  //overflow:hidden;
+  //background-position: center center;
+  //background-repeat: no-repeat;
+  //-webkit-background-size:cover;
+  //-moz-background-size:cover;
+  //background-size:cover;
+}
+.messageBoard .img-item input[type="file"] {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  text-align: center;
+  opacity: 0;
+  line-height: 70px;
+  display: inline-block !important;
+}
+.messageBoard .img-item .hover-show{
+  position: absolute;
+  z-index: 1001;
+  width: 82px;
+  height: 70px;
+  opacity: 0;
+  top: 0;
+  left: 0;
+  background: rgba(0, 0, 0, 0.5);
+}
+.messageBoard .img-item:hover .hover-show{
+  opacity: 1;
+}
+.messageBoard .img-item .hover-show .delete{
+  position: absolute;
+  top: 3px;
+  right: 3px;
+  padding: 0;
+  width: 20px;
+  height: 20px;
+  float: right;
+  text-align: center;
+}
+.messageBoard .img-item .hover-show .delete i{
+  color: #fff;
+  font-size: 16px;
+}
+.messageBoard .img-item .hover-show a{
+  display: inline-block;
+  width: 100%;
+  height: 70px;
+  font-size: 14px;
+  color: #fff;
+  text-align: center;
+  line-height: 70px;
+}
+.messageBoard .img-item .hover-show a i{
+  margin-right: 5px;
+  font-size: 16px;
+}
+.messageBoard .img-item #image-box .x-floating-wrap{
+  position: fixed;
+  z-index: 99998;
+  background: #000;
+  top: 0;
+  left: 0;
+  width: 680px;
+  height: 100%;
+  opacity: 0.5;
+}
 /*查看大图*/
 #image-box .x-floating-wrap,.image-box .x-floating-wrap {
   position: fixed;

components/common/image-upload/imageUpload.vue

@@ -1,119 +0,0 @@
-<template>
-  <div>
-    <el-upload
-      action = "/api/images"
-      :on-preview="handlePictureCardPreview"
-      :on-remove="handleRemove"
-      list-type="picture-card"
-      :on-success="uploadSuccess">
-      <img src="/images/messageBoard/msg_uploadPic.png" alt="">
-    </el-upload>
-    <el-dialog v-model="dialogVisible" size="tiny" id="preview">
-      <img :src="dialogImageUrl" width="100%" alt="">
-    </el-dialog>
-    <!--<div v-model="dialogVisible" size="tiny" id="preview">-->
-      <!--<img :src="dialogImageUrl" width="100%" alt="">-->
-    <!--</div>-->
-  </div>
-</template>
-<script>
-  export default {
-    data () {
-      return {
-        dialogImageUrl: '',
-        dialogVisible: false
-      }
-    },
-    methods: {
-      handleRemove (file, fileList) {
-        console.log(file)
-      },
-      handlePictureCardPreview (file) {
-        this.dialogImageUrl = file.url
-        this.dialogVisible = true
-        let preview = document.querySelector('.el-upload-list__item-preview')
-        preview.setAttribute('date-toggle', 'modal')
-        preview.setAttribute('date-target', '#preview')
-      },
-      uploadSuccess (response, file, fileList) {
-        this.$emit('fileAction', file.url)
-      }
-    }
-  }
-</script>
-<style>
-  input[type="file"] {
-    display: none;
-  }
-  .el-upload--picture-card {
-    position: relative;
-    width: 82px;
-    height: 70px;
-    line-height: 70px;
-    background: transparent;
-    cursor: pointer;
-    border-radius: 0;
-    box-sizing: border-box;
-    border: none;
-  }
-  .el-upload--picture-card:hover {
-    border-color: #ddd;
-    color: transparent;
-  }
-  .el-upload-list--picture-card {
-    margin: 0;
-    display: inline-block;
-    vertical-align: top;
-    height: 72px;
-  }
-  .el-upload-list--picture-card .el-upload-list__item {
-    margin: 0;
-    width: 82px;
-    height: 70px;
-    border: 1px solid #ccc;
-    border-radius: 0;
-    background: transparent;
-  }
-  .el-upload-list--picture-card .el-upload-list__item-thumbnail {
-    max-width: 82px;
-    max-height: 66px;
-  }
-  .el-upload-list__item.is-success .el-upload-list__item-status-label {
-    display: none;
-  }
-  [class*=" el-icon-"], [class^=el-icon-] {
-    font-size: 14px;
-  }
-  .el-icon-delete2 {
-    position: absolute;
-    top: 3px;
-    right: 3px;
-    /*top: 3px;*/
-    /*right: -30px;*/
-  }
-  /*.el-icon-view{*/
-    /*display: none;*/
-  /*}*/
-  /*.el-upload-list__item-preview{*/
-    /*display: none;*/
-  /*}*/
-  .el-upload-list__item-preview .el-icon-view {
-    margin-right: 7px;
-  }
-  .el-upload-list__item-preview:after{
-    content: '查看';
-    font-size: 14px;
-  }
-  .el-upload-list--picture-card .el-upload-list__item-actions{
-    position: absolute;
-    left: 0;
-    top: 0;
-    text-align: right;
-  }
-  .el-dialog--tiny {
-    width: 35%;
-  }
-  .v-modal{
-    z-index: 1983;
-  }
-</style>

components/common/upload/upload.vue

@@ -0,0 +1,56 @@
+<template>
+  <div>
+    <div class="preview">
+      <img :src="qualifications.url==''?'/images/all/upload-apply.png':qualifications.url" class="previewImage"/>
+      <input type="file" v-if="!qualifications.url" class="com-input" @change="update" accept="image/jpeg,image/jpg,image/gif,image/bmp,image/png,.pdf" />
+    </div>
+    <div class="hover-show" v-if="qualifications.url">
+      <span class="delete" title="删除" @click="deleteImg(qualifications.url)"><i class="fa fa-trash"></i></span>
+      <a @click="showImg(qualifications.url)"><i class="fa fa-search"></i>查看</a>
+    </div>
+    <div id="image-box" v-if="isShow">
+      <div class="x-floating-wrap"></div>
+      <div class="x-floating">
+        <div id="item-content">
+          <div class="x-close-wrap" @click="isShow = false"><a href="javascript:void(0);">&times;</a></div>
+          <div class="img"><img :src="qualifications.url"/></div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+  export default {
+    data () {
+      return {
+        qualifications: {
+          url: ''
+        },
+        isShow: false
+      }
+    },
+    methods: {
+      update (e) {
+        let file = e.target.files[0]
+        let param = new FormData()
+        param.append('file', file, file.name)
+        param.append('chunk', '0')
+        let config = {
+          headers: {'Content-Type': 'multipart/form-data'}
+        }
+        this.$http.post('/api/images', param, config)
+          .then(response => {
+            this.qualifications.url = response.data[0].path
+            this.$emit('uploadAction', response.data[0].path)
+          })
+      },
+      showImg (imgUrl) {
+        this.qualifications.url = imgUrl
+        this.isShow = true
+      },
+      deleteImg () {
+        this.qualifications.url = ''
+      }
+    }
+  }
+</script>

components/messageBoard/MessageBoard.vue → components/default/MessageBoard.vue

@@ -55,24 +55,19 @@
           <p>&nbsp;&nbsp;&nbsp;添加图片：</p>
           <div class="img-warp">
             <div class="img-item">
-              <image-upload @fileAction="listenFile">
-              </image-upload>
+              <upload/>
             </div>
             <div class="img-item">
-              <image-upload @fileAction="listenFile">
-              </image-upload>
+              <upload/>
             </div>
             <div class="img-item">
-              <image-upload @fileAction="listenFile">
-              </image-upload>
+              <upload/>
             </div>
             <div class="img-item">
-              <image-upload @fileAction="listenFile">
-              </image-upload>
+              <upload/>
             </div>
             <div class="img-item">
-              <image-upload @fileAction="listenFile">
-              </image-upload>
+              <upload/>
             </div>
           </div>
           <p class="tip clearfix">提示：最多可上传五张图片，每张大小不超过500KB,仅支持JPG、PNG、GIF格式.</p>
@@ -129,7 +124,7 @@
   </div>
 </template>
 <script>
-  import ImageUpload from '~components/common/image-upload/imageUpload.vue'
+  import upload from '~components/common/upload/upload.vue'
   import Page from '~components/common/page/pageComponent.vue'
   export default {
     name: 'messageBoard',
@@ -141,7 +136,6 @@
           currentPage: 1,
           dialogVisible: false
         },
-        dialogImageUrl: [],
         showHistory: true,
         isOpen: true,
         isLogin: false,
@@ -152,8 +146,8 @@
       }
     },
     components: {
-      ImageUpload,
-      Page
+      Page,
+      upload
     },
     computed: {
       messageBoardInfo () {
@@ -179,19 +173,10 @@
       }
     },
     methods: {
-      lookImg () {
-//        this.isHide = true
-        this.$emit('imgEvent', true)
-      },
       listenPage (page) {
         this.pageParams.page = page
         this.$emit('pageEvent', page)
       },
-      listenFile (url) {
-        let obj = {}
-        obj.img = url
-        this.dialogImageUrl.push(obj)
-      },
       isOpendMessage () {
         this.$emit('openBoardEvent', false)
       },
@@ -224,8 +209,6 @@
           } else if (!this.messageBoard.userTel && !this.messageBoard.email) {
             this.$message.info('请填写任意一种联系方式')
           } else {
-            console.log(this.isMobile)
-            console.log(this.isEmail)
             if (this.isMobile === false) {
               this.$message.info('请输入正确的手机号码')
             } else if (this.isEmail === false) {
@@ -374,6 +357,7 @@
   .messageBoard .modal-body .form-message label{
     margin-right: 25px;
   }
+  /*查看图片*/
   .messageBoard .modal-body .form-message .img-warp{
     position: relative;
     overflow: hidden;
@@ -385,8 +369,9 @@
     position: relative;
     float: left;
     margin-right: 23px;
-    width: 84px;
+    width: 82px;
     height: 70px;
+    overflow: hidden;
     cursor:  pointer;
     border: #C9C9C9 1px solid;
     font-size: 14px;
@@ -394,21 +379,15 @@
   .messageBoard .modal-body .form-message div.img-item:last-child{
     margin-right: 0;
   }
-  .messageBoard .modal-body .form-message div.img-item input[type="file"]{
-    position: absolute;
-    top: 0;
-    left: -20px;
-    width: 84px;
-    height: 70px;
-    opacity: 0;
-  }
   .messageBoard .modal-body .form-message div.img-item img{
     display: inline-block;
     max-width: 80px;
-    max-height: 60px;
+    max-height: 78px;
     z-index: 10;
     margin-top: 4px;
   }
+  /*查看图片*/
+
   .messageBoard .modal-body .form-message p.tip{
     text-align: left;
     color: #999;
@@ -609,7 +588,4 @@
     display: inline-block;
     margin: 0;
   }
-  body,textarea,button.btn{
-    font-family: "MicrosoftYaHei Regual", "微软雅黑" !important;
-  }
 </style>

components/default/RightBar.vue

@@ -73,23 +73,19 @@
 </template>
 <script>
   import { scrollTo } from '~utils/scroll'
-  import MessageBoard from '~components/messageBoard/MessageBoard.vue'
+  import MessageBoard from '~components/default/MessageBoard.vue'
   export default {
     name: 'right-bar',
     data () {
       return {
         historyLength: [],
         dialogVisible: false,
-        dialogImageUrl: '',
         page: 1,
         count: 3,
         currentPage: 1,
         chatCount: 0
       }
     },
-//    created () {
-//      this.$store.dispatch('getMessageBoardInformation', {page: 1, count: 3})
-//    },
     components: {
       MessageBoard
     },
@@ -214,7 +210,6 @@
   }
 </script>
 <style lang="scss" scoped>
-  /*查看*/
   a[disabled] {
     cursor: not-allowed;
   }