笑丶日葵 2022-02-11 00:37 采纳率: 41.9%
浏览 73
已结题

vue自定义组件多个页面使用,只有一个页面有成功回调函数,其他的没有

页面B能正常使用,但是页面C不能,上传成功回调函数没有触发,而却组件A添加两个以上之后,状态只有一种,应该是没有了成功状态和开始状态,只有一种上传状态。应该怎么解决?
这是自定义的组件A

<template>
    <div class="sign-upload" :fileName="fileName">
        <el-upload
            action="http://120.76.52.65/phpsaomaserver/upload.php?action=update"
            list-type="picture-card"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleRemove"
            :on-change="handleChange"
            :on-success="hangleSuccess"
            :headers="headers"
            :before-upload="beforeAvatarUpload"
            ref="upload"
        >
            <i class="el-icon-plus"></i>
        </el-upload>
        <el-dialog ref="img" :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="" />
        </el-dialog>
    </div>
</template>

<script>
export default {
    name: "upload-img",
    props: ["hangleSuccess", "id", "imageUrl"],
    data() {
        return {
            dialogImageUrl: "",
            dialogVisible: false,
            isshow: true,
            id: this.id,
            imageUrl: this.imageUrl,
            fileName: "",
            headers: { Authorization: window.sessionStorage.getItem("token") },
        };
    },
    methods: {
        //删除图片
        async handleRemove(file, fileList) {
            console.log(file, fileList);
            console.log("删除图片");
            const { data: res } = await this.$http.get(
                "http://120.76.52.65/phpsaomaserver/upload.php?action=delete&&name=" + this.fileName
            );
            if (res) {
                setTimeout(() => {
                    let upload = document.getElementsByClassName("el-upload--picture-card");
                    upload[this.id].style.display = "";
                }, 1000);
            }
        },
        //查看图片
        handlePictureCardPreview(file) {
            this.dialogImageUrl = file.url;
            this.dialogVisible = true;
        },

        //上传成功的回调
        hangleSuccess(response, file, fileList) {
            console.log("上传成功");
            this.fileName = response.fileName;
            this.$emit("sendFileName", response.fileName);
            // console.log(this.$emit("custom-filename", response.fileName));
            var merchantId = sessionStorage.getItem("token");
            console.log(this.imageUrl == "");
            if (this.imageUrl != "") {
                let data = new URLSearchParams();
                data.append("imgname", this.fileName);
                data.append("merchantId", merchantId);
                this.$http.post(this.imageUrl, data).then((res) => {});
            }
        },
        //选择上传时隐藏上传窗口
        handleChange() {
            console.log("开始上传");
            let upload = document.getElementsByClassName("el-upload--picture-card");
            upload[this.id].style.display = "none";
            upload[this.id].style.position = "relative";
        },
        //图片上传限制jpeg和2m
        beforeAvatarUpload(file) {
            const isJPG = file.type === "image/jpeg";
            const isLt2M = file.size / 1024 / 1024 < 2;
            if (!isJPG) {
                this.$message.error("上传头像图片只能是 JPG 格式!");
            }
            if (!isLt2M) {
                this.$message.error("上传头像图片大小不能超过 2MB!");
            }
            return isJPG && isLt2M;
        },
    },
};
</script>

<style lang="less" scoped>
.el-upload {
    position: relative;
}
/deep/ .el-upload-list__item-status-label {
    right: -35px;
}
</style>

这是能够成功回调上传成功回调函数的页面B

<template>
    <div class="main">
        <main-title title="图片设置"></main-title>
        <div class="content">
            <div class="uploadimg touxiang">
                <label for="">头像上传</label>
                <uploads-img
                    id="0"
                    imageUrl="/merchant.php?action=changeindexImage"
                    class="uploads-img"
                ></uploads-img>
            </div>
            <div class="uploadimg lunbotu">
                <label for="">主页轮播图</label>
                <uploads-img
                    id="1"
                    imageUrl="/merchant.php?action=changeswiperImage1"
                    class="uploads-img"
                ></uploads-img>
                <uploads-img
                    id="2"
                    imageUrl="/merchant.php?action=changeswiperImage2"
                    class="uploads-img"
                ></uploads-img>
                <uploads-img
                    id="3"
                    imageUrl="/merchant.php?action=changeswiperImage3"
                    class="uploads-img"
                ></uploads-img>
            </div>
        </div>
    </div>
</template>

<script>
import uploadsImg from "../uploadsImg.vue";
export default {
    components: {
        uploadsImg,
    },
};
</script>

<style lang="less">
.main {
    height: 100%;
    width: 100%;
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    background-color: white;
    .content {
        .uploadimg {
            display: flex;
            margin-left: 20rem;
            margin-bottom: 20rem;
            height: 148rem;
            position: relative;
            label {
                width: 80rem;
                font-size: 14rem;
            }
            .uploads-img {
                margin-left: 20rem;
                position: relative;
                width: 148rem;
            }
        }
        .lunbotu {
            width: 604rem;
        }
    }
}
@media only screen and (max-width: 701px) {
    .uploadimg {
        display: flex;
        flex-direction: column;
    }
}
</style>

这个不能回调到上传成功回调函数的页面C

<template>
    <div class="main">
        <main-title title="添加菜品"></main-title>
        <el-form
            :model="ruleForm"
            :rules="rules"
            ref="ruleForm"
            label-width="100px"
            class="demo-ruleForm"
            size="40"
        >
            <el-form-item label="菜品名" prop="dishName" id="dishName">
                <el-input v-model="ruleForm.dishName"></el-input>
            </el-form-item>
            <el-form-item
                label="价格"
                prop="dishPrice"
                :rules="[
                    { required: true, message: '金额不能为空' },
                    { type: 'number', message: '金额必须为数字值' },
                ]"
            >
                <el-input type="age" v-model.number="ruleForm.dishPrice" autocomplete="off">
                </el-input>
            </el-form-item>
            <el-form-item label="分类" prop="classId">
                <el-select
                    v-model="ruleForm.classId"
                    placeholder="请选择"
                    clearable="turn"
                    @change="changeClass"
                >
                    <el-option
                        v-for="item in options"
                        :key="item.getStatus"
                        :label="item.className"
                        :value="item.classId"
                    >
                    </el-option>
                </el-select>
                <el-button type="primary" @click="open" plain>添加类</el-button>
            </el-form-item>
            <el-form-item label="图片" prop="imageUrl">
                <uploads-img
                    @sendFileName="getfilename"
                    id="0"
                    imageUrl=""
                    class="uploads-img"
                ></uploads-img>
            </el-form-item>
            <el-form-item class="btn">
                <el-button type="primary" :plain="true" @click="submitForm('ruleForm')">
                    立即创建
                </el-button>
                <el-button @click="resetForm('ruleForm')">重置</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
import uploadsImg from "../uploadsImg.vue";
export default {
    components: {
        uploadsImg,
    },
    data() {
        return {
            //分类的初始值
            getStatus: "",
            fileimg: "",
            previewPath: "",
            previewVisible: false,
            photo: "",
            files: {},
            photoObj: "",
            ruleForm: {
                pics: [],
                dishName: "",
                dishPrice: "",
                classId: "",
                className: "",
                type: [],
                resource: "",
                desc: "",
                imageUrl: "",
            },

            //存放类名
            options: [],
            value: "",
            //填表规则
            rules: {
                dishName: [
                    { required: true, message: "请输入菜品名称", trigger: "blur" },
                    {
                        min: 1,
                        max: 15,
                        message: "长度在 1 到 15 个字符",
                        trigger: "blur",
                    },
                ],
                dishPrice: [
                    {
                        required: true,
                        message: "请输入菜品金额",
                        trigger: "blur",
                    },
                    {
                        min: 1,
                        max: 25,
                        message: "长度在 1 到 25 个字符",
                        trigger: "blur",
                    },
                ],
                classId: [{ required: true, message: "请选择分类", trigger: "change" }],
            },
        };
    },
    methods: {
        //类名发生变化时触发
        changeClass(val) {
            let proNum = this.options.findIndex((item, index) => {
                return item.classId == val;
            });
            this.ruleForm.classId = this.options[proNum].classId;
            this.ruleForm.className = this.options[proNum].className;
            console.log("选中的类名id:", val);
            console.log(val);
            console.log(this.ruleForm.classId);
            console.log(this.ruleForm.className);
        },
        getfilename: function (getfilename) {
            this.fileimg = getfilename;
            console.log("getfilename", getfilename);
            console.log("this.fileimg", this.fileimg);
        },
        //确认
        submitForm(formName) {
            console.log("tijiaode---filename", this.fileimg);
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    var merchantId = sessionStorage.getItem("token");
                    let Paramsdata = new URLSearchParams();
                    Paramsdata.append("dishName", this.ruleForm.dishName);
                    Paramsdata.append("classId", this.ruleForm.classId);
                    Paramsdata.append("className", this.ruleForm.className);
                    Paramsdata.append("dishPrice", this.ruleForm.dishPrice);
                    Paramsdata.append("merchantId", merchantId);
                    Paramsdata.append("imgname", this.fileimg);
                    this.$http.post("/menuLsit.php?action=create", Paramsdata).then((res) => {
                        this.resetForm(formName);
                        this.$message({
                            message: "添加成功",
                            type: "success",
                        });
                    });
                } else {
                    return false;
                }
            });
        },
        //重置
        resetForm(formName) {
            this.$refs[formName].resetFields();
            this.getStatus = "请选择";
        },
        //添加类
        open() {
            this.$prompt("请输入分类名称", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                inputPattern: /^[\u4E00-\u9FA5A-Za-z_]+$/,
                inputErrorMessage: "分类名格式不正确",
            })
                .then(({ value }) => {
                    let data = new URLSearchParams();
                    data.append("merchantId", sessionStorage.getItem("token"));
                    data.append("className", value);
                    this.$http.post("/classList.php?action=create", data).then((res) => {
                        console.log("类名添加成功", res);
                        this.$router.go(0);
                    });

                    this.$message({
                        type: "success",
                        message: value + "分类名设置成功 ",
                    });
                })
                .catch(() => {
                    this.$message({
                        type: "info",
                        message: "取消输入",
                    });
                });
        },
    },
    //页面渲染时完成
    created() {
        //获取菜品类名
        var merchantId = sessionStorage.getItem("token");
        let data = new URLSearchParams();
        data.append("merchantId", merchantId);
        this.$http.post("/menuLsit.php?action=getClass", data).then((res) => {
            this.options = res.data.classList;
            console.log(this.options);
        });
    },
};
</script>

<style lang="less" scoped>
.main {
    display: flex;
    align-items: flex-start;
    background-color: white;
    .el-form {
        .el-input__inner {
            width: 420rem;
        }
        .el-select {
            margin-right: 20rem;
            margin-bottom: 20rem;
        }

        .btn {
            text-align: center;
            margin-left: -100rem;
        }
    }
}
</style>
  • 写回答

1条回答 默认 最新

  • 归来巨星 前端领域新星创作者 2022-02-11 09:11
    关注

    props 和 methods 中的handleSuccess冲突了

    img

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论 编辑记录

报告相同问题?

问题事件

  • 系统已结题 2月19日
  • 已采纳回答 2月11日
  • 创建了问题 2月11日

悬赏问题

  • ¥30 matlab appdesigner私有函数嵌套整合
  • ¥15 给我一个openharmony跑通webrtc实现视频会议的简单demo项目,sdk为12
  • ¥15 vb6.0使用jmail接收smtp邮件并另存附件到D盘
  • ¥30 vb net 使用 sendMessage 如何输入鼠标坐标
  • ¥15 关于freesurfer使用freeview可视化的问题
  • ¥100 谁能在荣耀自带系统MagicOS版本下,隐藏手机桌面图标?
  • ¥15 求SC-LIWC词典!
  • ¥20 有关esp8266连接阿里云
  • ¥15 C# 调用Bartender打印机打印
  • ¥15 我这个代码哪里有问题 acm 平台上显示错误 90%,我自己运行好像没什么问题