上传组件修改

修复图片预览的问题

vue/src/components/ImageViewer/main.vue

@@ -1,5 +1,5 @@
 <template>
-    <el-image-viewer v-show="value" :initial-index="index" :on-close="close" :url-list="urlList" :z-index="200000"/>
+    <el-image-viewer v-if="value" :initial-index="index" :on-close="close" :url-list="urlList" :z-index="200000"/>
 </template>
 
 <script>

vue/src/components/UploadFile/index.vue

@@ -2,7 +2,7 @@
     <el-upload
             ref="upload"
             :before-upload="beforeUpload"
-            :class="{disabled:hideUploader}"
+            :class="{disabled: hideUploader}"
             :file-list="data"
             :http-request="httpRequest"
             :limit="limit"
@@ -14,30 +14,48 @@
             list-type="picture-card"
     >
         <i class="el-icon-plus" slot="default"/>
+
         <template v-slot:file="{file}">
-            <el-tooltip :content="file.name" effect="dark" placement="bottom">
+            <span
-                    <span class="el-upload-list__item-actions">
+                    class="el-upload-list__item-actions"
-                        <span v-if="showPreview(file)" class="el-upload-list__item-preview" @click="preview(file)">
+                    @mouseenter="e => handleBlockMouseEnter(e,file)"
-                            <i class="el-icon-zoom-in"/>
+                    @mouseleave="handleBlockMouseLeave"
-                        </span>
+            >
-                        <span v-if="showDownload(file)" class="el-upload-list__item-delete" @click="download(file)">
+                <span
-                            <i class="el-icon-download"/>
+                        v-if="showPreview(file)"
-                        </span>
+                        class="el-upload-list__item-preview"
-                        <span v-if="!disabled" class="el-upload-list__item-delete" @click="remove(file)">
+                        @click="() => preview(file)"
-                            <i class="el-icon-delete"/>
+                >
-                        </span>
+                    <i class="el-icon-zoom-in"/>
-                    </span>
+                </span>
-            </el-tooltip>
+                <span
-            <img :src="file.url" class="el-upload-list__item-thumbnail">
+                        v-if="showDownload(file)"
+                        class="el-upload-list__item-delete"
+                        @click="() => download(file)"
+                >
+                    <i class="el-icon-download"/>
+                </span>
+                <span
+                        v-if="!disabled"
+                        class="el-upload-list__item-delete"
+                        @click="() => remove(file)"
+                >
+                    <i class="el-icon-delete"/>
+                </span>
+            </span>
+            <img v-if="file.status === 'success'" :src="file.url" class="el-upload-list__item-thumbnail">
             <label class="el-upload-list__item-status-label">
                 <i class="el-icon-upload-success el-icon-check"/>
             </label>
-            <div v-if="file.status==='uploading'" class="progress-mask">
+            <div v-if="file.status === 'uploading'" class="progress-mask">
                 <el-progress :percentage="file.percentage" type="circle"/>
             </div>
         </template>
+
+        <el-tooltip ref="tooltip" :content="tooltipContent" popper-class="upload-tooltip"/>
     </el-upload>
 </template>
+
 <script>
     /*
     * 直传七牛云
@@ -47,13 +65,14 @@
     import axios from 'axios'
     import {attachmentPrefix} from '@/config'
     import {elError} from "@/utils/message"
-    import {isEmpty} from '@/utils'
+    import {debounce, isEmpty} from '@/utils'
     import {isImage} from "@/utils/validate"
     import {deleteUpload, download, upload, autoCompleteUrl} from "@/utils/file"
     import {numberFormatter} from "@/filter"
 
     export default {
         name: 'UploadFile',
+
         props: {
             disabled: {type: Boolean, default: false},
             multiple: {type: Boolean, default: true},
@@ -61,11 +80,14 @@
             limit: {type: Number, default: 10},
             maxSize: {type: Number | String, default: '10MB'}
         },
+
         data() {
             return {
-                data: this.fileList
+                data: this.fileList,
+                tooltipContent: null
             }
         },
+
         computed: {
             count() {
                 return this.data.length
@@ -74,10 +96,10 @@
                 return this.disabled || this.count >= this.limit
             },
             previewUrlList() {
-                if (!this.data) return []
+                return this.data ? this.data.map(i => i.url) : []
-                return this.data.map(i => i.url)
             }
         },
+
         watch: {
             fileList: {
                 immediate: true,
@@ -90,6 +112,7 @@
                 }
             }
         },
+
         methods: {
             showPreview(file) {
                 return file.name && isImage(file.name)
@@ -108,6 +131,24 @@
                 return parseInt(num) * (map[unit] || 1)
             },
 
+            //模仿el-table的tooltip
+            handleBlockMouseEnter(event, file) {
+                const tooltip = this.$refs.tooltip
+                this.tooltipContent = file.name
+                tooltip.referenceElm = event.target
+                tooltip.$refs.popper && (tooltip.$refs.popper.style.display = 'none')
+                tooltip.doDestroy()
+                tooltip.setExpectedState(true)
+                this.activateTooltip(tooltip)
+            },
+            handleBlockMouseLeave() {
+                const tooltip = this.$refs.tooltip
+                if (tooltip) {
+                    tooltip.setExpectedState(false)
+                    tooltip.handleClosePopper()
+                }
+            },
+
             //附件移除时，仅当非本次上传时触发remove事件
             remove(file) {
                 //区分是否为本次新上传，以及是否上传成功
@@ -151,7 +192,7 @@
                 this.remove(file)
             },
 
-            //上传前获取七牛的上传凭证，并指定key
+            //上传前过滤文件
             beforeUpload(file) {
                 if (!file.type.includes('image')) {
                     elError('暂时只支持图片上传')
@@ -176,12 +217,18 @@
                     },
                     cancelToken: source.token
                 })
+                //由于ele原有的上传方法是原生ajax，所以取消上传时会调用一次abort方法
                 promise.abort = source.cancel
                 return promise
             }
+        },
+
+        created() {
+            this.activateTooltip = debounce(tooltip => tooltip.handleShowPopper(), 100)
         }
     }
 </script>
+
 <style lang="scss">
     .disabled .el-upload--picture-card {
         display: none;
@@ -215,4 +262,8 @@
     .el-upload-list__item-thumbnail {
         object-fit: cover;
     }
+
+    .upload-tooltip {
+        max-width: 146px;
+    }
 </style>

vue/src/views/example/components/uploadExample.vue

@@ -1,7 +1,7 @@
 <template>
     <div>
         <div class="tip-row">根据业务需求简单封装了upload，集成自带预览组件</div>
-        <upload-file/>
+        <upload-file :file-list="fileList"/>
         <div class="tip-row">原始使用axios的上传</div>
         <input @change="change" type="file">
     </div>
@@ -14,6 +14,24 @@
     export default {
         name: "uploadExample",
         components: {UploadFile},
+        data() {
+            return {
+                fileList: [
+                    {
+                        url: 'https://dss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=4018557288,1217151095&fm=26&gp=0.jpg',
+                        name: '1jpgjpgjpgjpgjpgjp1jpgjpgjpgjpgjpgjpgjpggjpg.jpg'
+                    },
+                    {
+                        url: 'https://dss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3252521864,872614242&fm=26&gp=0.jpg',
+                        name: '2.jpg'
+                    },
+                    {
+                        url: 'https://dss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2534506313,1688529724&fm=26&gp=0.jpg',
+                        name: '3.jpg'
+                    },
+                ]
+            }
+        },
         methods: {
             change(e) {
                 let file = e.target.files[0]