需求是上傳的圖片,會在圖片展示區(qū)顯示斯嚎,當(dāng)刪除上傳圖片時利虫,同時也會刪除
子組件upload中
一定要在這里定義向父組件傳遞的事件
const emit = defineEmits(["addImg","delImg"]);
addImg事件
//上傳成功回調(diào)
const handleSuccess = (res, file) => {
console.log("上傳成功", res);
// console.log("handleSuccessfile", file);
if (res.code === 1) {
midArr.value.push(res.mid);
// 調(diào)用父組件事件在圖片展示區(qū)添加圖片
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>
// 上傳圖片顯示在展示區(qū)
const addImg = (imgPath) => {
imgArr.value = [];
imgArr.value.push(imgPath);
product.value = [...imgArr.value, ...product.value];
};