vue element 单张图片上传，不展示图片

功能点：点击上传图片按钮，进行上传图片，并把列表那一项数据 带上一起传参

 

<!-- 上传图片,哪里需要显示上传图片按钮，把这段代码放在那 getTableList是获取列表数据方法 -->
<UploadImg :value="scope.row" @getTableList="getTableList" v-if="scope.row.filePath === '0' && scope.row.discardTime ===null " title="上传图片" recordType="fit" class="upload-file-text" />

// 图片组件
<template>
    <el-upload
        :headers="headers"
        class="m-l-10"
        action="/api/prevent-admin/file/upload/multFileByRecordType"
        accept="jpg,png,jpeg"
        :on-success="handleAvatarSuccess"
        :before-upload="beforeAvatarUpload"
        :show-file-list="false"
        :data="uploadData"
        >
        <el-button type="text">{{title}}</el-button>
    </el-upload>
</template>

<script>
    import { Loading } from 'element-ui'
    let loadingInstance = null
    export default {
        props: {
            // 列表点击的那项数据
            value: {
                default: ''
            },
            // 按钮文字
            title: {
                default: '点击上传'
            },
            // 页面类型
            recordType: {
                default: ''
            }
        },
        data() {
            return {
                headers: {
                    Authorization: 'Bearer ' + localStorage.getItem('Authorization')
                },
                // 图片上传的数据
                uploadData: {
                    dataId: '',
                    files: '',
                    recordType: '',
                    surverId: ''
                }
            }
        },
        created () {
            this.uploadData={
                dataId: this.value.id,
                recordType: this.recordType,
                surverId: this.value.ssid
            }
        },
        methods: {
            beforeAvatarUpload (file) {
                this.uploadData.files = file
                loadingInstance =Loading.service(this.$store.state.LoadingoOptions)
                // 图片格式，大小校验
                const testmsg = /^(\s|\S)+(jpg|png|JPG|PNG|jpeg)+$/.test(file.type)
                const isLt2M = file.size / 1024 / 1024 < 2
                if (!testmsg) {
                    this.$message.error('上传图片格式不对!')
                    loadingInstance.close()
                    return false
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!')
                    loadingInstance.close()
                    return false
                }
                return testmsg && isLt2M
            },
            handleAvatarSuccess (res, file) {
                setTimeout(() => {
                    loadingInstance.close()
                }, 500)
                if (res.code !== 200) {
                    this.$message.error(res.msg)
                    return false
                }
                this.$message.success('上传成功')
                // 图片上传成功，调取列表接口
                this.$emit('getTableList')
            }
        }
    }
</script>

<style lang="less" scoped>
.el-upload{display:inline-block;}
</style>