如何在Javascript中删除上传的图像？

我正在开发我的第一个web应用程序。它允许用户发布该地区发生的事件，类似于eventbrite。我正在使用NodeJS、Express、Mongo

我创建了一个表单，允许用户输入事件详细信息，并上传与事件相关的图像

如下所示：

如果用户上传一个图像然后提交，我成功地保存了该图像。当用户想要查看提交的事件时，将显示图像

我的问题如下：

用户填写表单并上传图像

用户决定不需要与事件关联的图像

用户单击删除图像（图像似乎已被删除，即图像预览为灰色，并显示“将图像放到此处或单击上载”）

用户提交事件

用户查看事件。“已删除”的图像就在那里。换句话说，图像从未被删除

我似乎不知道如何在上传后删除图像。

这是我的EJS文件：

<input name="image" type="file" id="image" accept="image/*" style="display:none" 
onchange="handleFiles(this.files)">

 <div id="imageBorder" >
      <div id="imageContainer">
            <div id="dropbox">
                 <i class="fa fa-picture-o" aria-hidden="true"></i>
                 <p> Drop image here or click to upload</p>
            </div>
            <div id="preview" class="hidden">
            </div>
            <button id="fileSelect" class="btn btn-primary btn-block">Upload Image</button>
            <button id="fileRemove" class="btn btn-primary btn-block">Remove Image</button>

        </div>
  </div> <!-- END OF imageBorder -->

基本上，在前端，当用户上传图像时，会创建一个图像标签并将其插入预览中。将从预览中删除类“hidden”，并将类“hidden”添加到dropbox。于是图像出现了

单击“删除图像”后，将从预览中删除，预览将隐藏，并且类“隐藏”将从dropbox中删除。即，图像似乎已被删除

但是，一旦提交表单，req.file就不是空的

这是routes节点文件的一部分（我用于上传图像——不相关）

---

有人有什么建议吗？当我说reader.readDataAsURL（我想这就是保存文件的原因？）时，我很想了解到底发生了什么。我读了一些stackoverflow帖子，但不太理解建议的解决方案或解释…

选择一个图像只会在浏览器中显示，而不会实际上传它。只有在提交表单后才会发生这种情况。根据您的代码，用户单击“删除图像”按钮后，

保持不变，因此发送表单仍将上载图像。您需要实际清除该字段，如下所述：

关于技术上无关的第二个问题：

我似乎不知道如何删除上传后的图像

---

为了在上传后删除图像，可能是在“编辑事件”模式下，您必须发送表单数据，指示图像应该被删除，然后在服务器上删除它。

根据Chris G的回答，这就是我所做的，并且它起到了作用：

 fileRemove.addEventListener("click", function(e) {
    e.preventDefault(); // prevent submit
    if(!$('#preview').hasClass('hidden')) { // If there is an image uploaded
        $('#preview').empty(); 
        $('#dropbox').removeClass('hidden');
        $('#preview').addClass('hidden');
        $('#fileSelect').text('Upload Image');
        $('#image').wrap('<form>').closest('form').get(0).reset();
         $('#image').unwrap();
    }
    removeError($('#imageError'), $('#image'));
});

fileRemove.addEventListener（“单击”），函数（e）{
e、 preventDefault（）；//防止提交
if（！$（'#preview'）.hasClass（'hidden'）{//如果上传了图像
$（“#预览”）.empty（）；
$（“#dropbox”）.removeClass（'hidden'）；
$（'预览'）.addClass（'隐藏'）；
$（'#fileSelect'）.text（'Upload Image'）；
$（'#image'）.wrap（''）.closest（'form'）.get（0.reset（）；
$（“#图像”）.unwrap（）；
}
删除错误（$（'imageError'），$（'imageError'）；
});

你看过这篇文章了吗<代码>fs.取消链接

router.post("/", middleware.isLoggedIn, upload.single('image'), function(req,res) { 

    var filepath = undefined;
    if(req.file) { // THIS IS TRUE... REQ.FILE is not empty....
        filepath = req.file.path.substr(7); // Substr to remove "/public"
    }  
    ....
    ....
}

 fileRemove.addEventListener("click", function(e) {
    e.preventDefault(); // prevent submit
    if(!$('#preview').hasClass('hidden')) { // If there is an image uploaded
        $('#preview').empty(); 
        $('#dropbox').removeClass('hidden');
        $('#preview').addClass('hidden');
        $('#fileSelect').text('Upload Image');
        $('#image').wrap('<form>').closest('form').get(0).reset();
         $('#image').unwrap();
    }
    removeError($('#imageError'), $('#image'));
});