vue element 单张图片上传，删除，预览

功能点： 点击‘查看图片’按钮，弹窗中会展示图片，第一次看到的图片是从父组件传过来的图片，点击删除按钮，调取删除接口删除图片，在重新上传图片，data中放入列表那一项的数据，上传成功，图片需要回显，此时图片上传成功方法中调取图片回显的接口，进行显示图片

 

<!-- 图片显示和删除 getTableList是获取列表方法，当点击x号时，调取getTableList方法刷新页面-->

<el-dialog width="400px" title="查看图片" :visible.sync="dialog.chakanjieguoInnerPop" append-to-body @close='getTableList()'>
            <center class="p-b-30">
<!-- UploadImgS是图片组件 scope是点击列表一项的数据 lockImgData是图片回显的数据 recordType是不同页面的类型-->

                <UploadImgS :value='scope'  :lockImgData='lockImgData' recordType="fit"/>
            </center>
        </el-dialog>

 <!-- 图片组件 -->
<template>
   <div>
      <el-upload
        class="avatar-uploader"
        :headers="headers"
        action="/api/prevent-admin/file/upload/multFileByRecordType"
        accept="jpg,png,jpeg"
        :on-success="handleAvatarSuccess"
        :before-upload="beforeAvatarUpload"
        :show-file-list="false"
        :data="uploadData"
        >
        <!-- 加号 -->
        <i v-if="!ImgData.img" class="el-icon-plus avatar-uploader-icon"></i>
    </el-upload>
        <!-- 图片回显，图片预览放大 -->
      <el-image v-if="ImgData.img" class="inner-img" :src="ImgData.img" :preview-src-list='ImgData.srcList' ></el-image>
      <!-- 图片删除 -->
      <el-button v-if="ImgData.img" type="text" @click="del">删除</el-button>
   </div>
</template>

<script>
    // 引入loading
    import { Loading } from 'element-ui'
    import { postDeleteImg, postUploadPathByRecordType } from '@/axios/biodetection'
    // 定义 loading变量
    let loadingInstance = null
    export default {
        data () {
            return {
                headers: {
                    Authorization: 'Bearer ' + localStorage.getItem('Authorization')
                },
                // 上传的数据
                uploadData: {
                    dataId: '',
                    files: '',
                    recordType: '',
                    surverId: ''
                },
                // 图片数据
                ImgData: {
                    img: '',
                    srcList: []
                },
            }
        },
        props: {
            // 点击列表那一项的数据
           value: {
                default: ''
            },
            // 图片数据
            lockImgData:{
                default:''
            },
            // 类型
             recordType: {
                default: ''
            }
        },
        watch: {
            // 监听图片改变 因为点击不同的数据，图片会发生变化，通过监听，解决点击不同列表数据，图片没有更新问题
            lockImgData: {
                deep: true,
                immediate: true, // 页面加载先执行
                handler(v) {
                   this.ImgData=v
                },
            },
            // 监听列表数据改变 因为点击不同的数据，接收的数据是上一条列表数据的，所以通过监听，可以拿到最新的列表数据
            value:{
                deep: true,
                immediate: true,
                handler(v) {
                    // 图片删除，回显都需要用到value中的数据 ，所以要监听，获取最新的数据
                   this.value = v
                   // 这里因为图片上传 父组件传的数据需要是最新的
                   this.uploadData = {
                        dataId : v.id,
                        recordType : this.recordType,
                        surverId : v.ssid
                    }
                },
            }
        },
        methods: {
            beforeAvatarUpload (file) {
                this.uploadData.files = file
                // loading 加载
                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('上传图片格式不对!')
                    // 关闭loading加载
                    loadingInstance.close()
                    return false
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!')
                    loadingInstance.close()
                    return false
                }
                return testmsg && isLt2M
            },

            async handleAvatarSuccess (res, file) {
                setTimeout(() => {
                    loadingInstance.close()
                }, 500)
                if (res.code !== 200) {
                    this.$message.error(res.msg)
                    return false
                }
                //调取图片回显接口
                const params = {
                    dataId: this.value.id,
                    filePath: this.value.filePath,
                    recordType: this.recordType,
                    surverId: this.value.ssid
                }
                const res2 = await postUploadPathByRecordType(params)
                if (res2.code === 200) {
                    this.ImgData = {
                        img: res2.data[0],
                        srcList: res2.data
                    }
                }
                this.$message.success('上传成功')
            },
        //删除图片
        async del () {
            this.$confirm('确认删除吗?', "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
            }).then(async () => {
                 const params = {
                    dataId: this.value.id,
                    filePath: this.value.filePath,
                    recordType: this.recordType,
                    surverId: this.value.ssid
                }
                const res = await postDeleteImg(params)
                if (res.data === 1) {
                    this.$message.success('删除成功')
                    this.ImgData = {
                        img: '',
                        srcList: []
                    }
                }
            })
        },
        }
    }
</script>

<style lang="less" scoped>

</style>

loading 在vuex配置
state:{
    LoadingoOptions:{ // loading配置
            lock: true,
            spinner: 'el-icon-loading',
            customClass: 'win-loading'
        },
}