js实现图片删除

实现图片删除的几种方法

前端删除图片（仅从DOM中移除）

// 获取图片元素
const imgElement = document.getElementById('imageId');

// 移除图片
if (imgElement && imgElement.parentNode) {
    imgElement.parentNode.removeChild(imgElement);
}

从服务器删除图片（需要后端配合）

// 使用fetch API发送删除请求
async function deleteImage(imageId) {
    try {
        const response = await fetch(`/api/images/${imageId}`, {
            method: 'DELETE',
            headers: {
                'Content-Type': 'application/json'
            }
        });

        if (response.ok) {
            console.log('图片删除成功');
            // 可选：从DOM中移除图片
            const imgElement = document.getElementById(imageId);
            if (imgElement) imgElement.remove();
        } else {
            console.error('删除失败');
        }
    } catch (error) {
        console.error('删除过程中出错:', error);
    }
}

使用FormData上传和删除

// 如果是通过表单上传的图片
function deleteUploadedImage(fileName) {
    const formData = new FormData();
    formData.append('filename', fileName);

    fetch('/delete-image', {
        method: 'POST',
        body: formData
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            alert('图片已删除');
        }
    })
    .catch(error => console.error('Error:', error));
}

注意事项

• 前端删除仅影响页面展示，实际文件仍存在于服务器
• 服务器端删除需要相应的API端点支持
• 删除操作前最好添加确认对话框防止误删
• 考虑添加错误处理和用户反馈机制

完整示例（带确认对话框）

function deleteImageWithConfirmation(imageId) {
    if (confirm('确定要删除这张图片吗？')) {
        fetch(`/api/images/${imageId}`, {
            method: 'DELETE'
        })
        .then(response => {
            if (!response.ok) throw new Error('删除失败');
            document.getElementById(imageId).remove();
        })
        .catch(error => {
            alert(error.message);
        });
    }
}