页面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>
