elementui图片在修改页面的回显

上传图片和数据后，通常要有修改图片和数据的权限。我查阅了网上很多文章，大多讲的是上传图片时候的回显，少数讲的是修改页面的回显。

我借鉴了这部分的文章，渐渐明白有一个方法在图片回显的过程中不可或缺，这便是mounted()方法。这篇文章也算是对mounted()方法的应用做个小解。

mounted() 钩子函数是 Vue.js 生命周期中的一个阶段，在组件被挂载到 DOM 后立即执行。它在组件实例被创建并且相关的模板被编译之后调用。

mounted() 钩子函数可以用来执行一些需要在组件挂载后进行的初始化操作，比如发送异步请求、订阅事件、操作 DOM 等

依据我的理解，mounted方法在页面刷新的时候就被vue自动调用了，我们可以根据这个特性来回显图片。

 var image_url = "";//传入后端的图片地址
 const regex = /src="(.*?)"/;
 var imageurl = regex.exec(data.imageurl)[1];//用于图片回显在页面的图片地址

先在<script>标签里通过两个变量，来接收从数据库查到的图片地址，发送给数据库进行修改的新地址。

//上传图片
               new Vue({
                    el: '#app',
                    data() {
                        return {
                            control: true,//控制器
                            image_url: '', //存储对话框中展示的图片链接地址
                            dialogVisible: false, //控制对话框是否显示
                            disabled: false, //控制按钮是否禁用
                            fileList: [],//存放上传时多个图片
                            clearThumbnail: false,//清空图片
                        };
                    },
                    mounted() {
                        if (imageurl) {
                            this.fileList.push(imageurl);//存入数据库已经存在的缩略图                     
                            // 将图片地址赋值给 file_list 属性
                            this.$nextTick(() => {
                                this.$refs.upload.fileList = [{ url: imageurl }];
                            });
                            console.log(imageurl)
                        } else {
                            return false;
                        }
                        console.log(JSON.stringify(this.fileList))
                    },
                    methods: {
                        // 上传文件之前
                        beforeUpload(file) {
                            //文件大小校验
                            if (file.size > 10 * 1024 * 1024) {
                                this.$message('文件过大，请上传小于10MB的文件〜')
                                return false
                            }
                            this.control = true;
                            return true
                        },
                        //上传图片
                        uploadFiles(file) {
                            // 调用文件大小校验方法
                            if (this.beforeUpload(file.file)) {
                                this.formData = new FormData()
                                this.formData.append('file', file.file);
                                axios({
                                    method: 'post',
                                    url: '__APP__/Manager/upload_images',
                                    data: {
                                        'param1': value,
                                    }
                                })
                                // 请求接口
                                uploadFiles(this.formData).then((res) => {
                                    if (res.code == '0') {
                                        this.$message({
                                            message: '上传成功',
                                            type: 'success'
                                        })
                                        // 图片赋值
                                        this.image_url = res.data.realPath
                                    } else {
                                        // 错误信息
                                        this.$message({
                                            message: res.msg,
                                            type: 'error'
                                        })
                                    }
                                })
                            }
                        },
                        //上传成功
                        handleAvatarSuccess(response, file, fileList) {
                            console.log('上传成功的文件信息：', response, file, fileList);
                            image_url = response.data.src;
                            this.fileList.push(image_url);
                        },
                        //上传失败
                        uploadError(err, file, fileList) {
                            this.$message({
                                type: 'warning',
                                message: '上传失败'
                            })
                        },
                        //输出被删除的文件信息
                        handleRemove(file) {
                            console.log("执行了删除操作:" + this.fileList[0]);
                            let _this = this;
                            url = this.fileList[0];
                            $.post('__APP__/Manager/remove_image', { image_url: url }, function (res) {
                                console.log(res)
                                if (res != 1) {
                                    layer.msg('删除缩略图失败', { icon: 5, time: 1000 });
                                    return false; // 阻止表单提交
                                } else {
                                    image_url = "";
                                    _this.clearThumbnail = true;
                                    _this.control = false;
                                    console.log("全删")
                                }
                            }, 'json');
                            this.clearThumbnail = false;
                        },
                        //对应图片的链接地址存储到到image_url，预览图片
                        handlePictureCardPreview(file) {
                            this.image_url = this.fileList[0];
                            //this.image_url = file.url;
                            console.log(this.fileList[0])
                            if (this.control != false) {
                                this.dialogVisible = true;
                            }
                        },
                    }
                });

我的逻辑大致是，把【需要回显的图片地址】存入fileList数组里。当用户更改图片时，通过调用上传的方法、上传成功的方法，把【新的图片地址】存入fileList数组，覆盖掉原有的图片地址。

感觉elementui的图片回显比layui的图片回显更简单些，如果各位大神有什么更好的思路，可以告诉我。

完结撒花。