需求是上传的图片,会在图片展示区显示,当删除上传图片时,同时也会删除
子组件upload中
一定要在这里定义向父组件传递的事件
const emit = defineEmits(["addImg","delImg"]);
addImg事件
//上传成功回调
const handleSuccess = (res, file) => {
console.log("上传成功", res);
// console.log("handleSuccessfile", file);
if (res.code === 1) {
midArr.value.push(res.mid);
// 调用父组件事件在图片展示区添加图片
emit("addImg", res.img_path);
ElMessage.success({
message: "上传成功!",
});
} else {
fileList.value.pop();
ElMessage.error({
message: "上传失败,请重新上传",
});
}
};
父组件接收
<upload
:product_id="data.pid * 1"
@addImg="addImg"
@delImg="delImg"
ref="uploadRef"
></upload>
// 上传图片显示在展示区
const addImg = (imgPath) => {
imgArr.value = [];
imgArr.value.push(imgPath);
product.value = [...imgArr.value, ...product.value];
};
网友评论