element-ui 照片墙 多图上传和显示

<el-upload
                    :action="api+'upload'"
                    list-type="picture-card"
                    :on-preview="handlePictureCardPreview"        //点击时的钩子
                    :on-remove="handleRemove"                           //点击删除时的钩子
                    :before-upload="beforeAvatarUpload14"         //点击上传时的钩子
                    :file-list='this.dialogImageUrl'
                    >
                    <i class="el-icon-plus"></i>
                    </el-upload>
                    <el-dialog :visible.sync="dialogVisible">
                    <img width="100%" :src="dialogImageUrl" alt="">
                    </el-dialog>

	//data里的
			pic:[],
            dialogImageUrl: [],
            dialogVisible: false,


				//删除时的事件
            handleRemove(file, fileList) {
                console.log(file, fileList);
                let a = file.url
                console.log(a)
                let b = this.pic.indexOf(a)
                console.log(b)
                this.pic.splice(b,1)
                this.dialogImageUrl.splice(b,1)
                console.log(this.pic)
            },
            handlePictureCardPreview(file) {
                this.dialogImageUrl = file.url;
                this.dialogVisible = true;
            },
            // 头像上传之前
            beforeAvatarUpload14(file) {
                var that = this;
                // 判断类型是不是图片
                if (!/image\/\w+/.test(file.type)) {
                    that.$message("请确保文件为图像类型");
                    return false;
                } else {
                    var article_image, image_base64;
                    var reader = new FileReader();
                    reader.readAsDataURL(file);
                    reader.onload = function (e) {
                        image_base64 = this.result.split(",")[1];
                        article_image = image_base64;
                        var params = {
                            imgdata: article_image
                        };
                        that.$axios.post(that.api+'upload', params)
                            .then(res => {
                                if (res.data.status == 1) {
                                    console.log(111)
                                    that.pic.push(res.data.result.url);
                                    that.dialogImageUrl.push({
                                        'url':res.data.result.url
                                    })
                                    console.log(that.pic)
                                    console.log(222)
                                } else if (res.data.status == 0) {
                                    that.$message.error(res.data.message);
                                }

                            })
                            .catch(error => {
                            })
                    }
                }
            },






//设置默认显示
				this.pic.forEach(res=>{
                        this.dialogImageUrl.push({
                            'url':res
                        })
                    })