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

Question

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

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

如下所示：

如果用户上传图像然后提交，我成功地设法存储图像。当用户想要查看提交的事件时，图像就会出现。

我的问题如下：

1. 用户填写表格并上传图片
2. 用户决定他不想要与事件关联的图像
3. 用户单击删除图像（图像似乎已被删除 - 即图像预览为灰色并显示“将图像拖放到此处或单击上传”）
   4. 用户提交事件。
   5. 用户查看事件。 “已删除”的图像在那里。换句话说，图像从未被删除。

我似乎不知道如何在图片上传后实际删除它。

这是我的 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 -->

请注意，我在 imageContainer 中有两个 div，一个隐藏的预览 div 和一个 Dropbox div。

现在这是我的 .js 文件：

function eventImageSetup() {
    var dropbox = document.getElementById("dropbox"),
        fileElem = document.getElementById("image"),
        fileSelect = document.getElementById("fileSelect"),
        fileRemove = document.getElementById("fileRemove");
    $(dropbox).height($('#imageBorder').height());
    fileSelect.addEventListener("click", function(e) {
        if (fileElem) {
          fileElem.click();
          e.preventDefault(); // to prevent submit
        }
    }, false);
    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');
        }
        removeError($('#imageError'), $('#image'));
    });
    dropbox.addEventListener("dragenter", dragenter, false);
    dropbox.addEventListener("dragover", dragover, false);
    dropbox.addEventListener("drop", drop, false);
}
....
....
function handleFiles(files) { 
    var file = files[0];
    ... //some code for error checking here - deleted it for now 
    var img = document.createElement("img");
    img.id = "uploadedImage";
    img.file = file;
    img.onload = function() {
         adjustImageSize(img);
    };

    $('#dropbox').addClass('hidden');
    $('#preview').removeClass('hidden');
    $('#preview').empty();
    $('#preview').append(img);
    $('#fileSelect').text('Replace Image');

    var reader = new FileReader();
    reader.onload = (function(aImg) {
       return function(e) {
           aImg.src = e.target.result;
       };
    })(img);
    reader.readAsDataURL(file);
}

基本上，在前端，当用户上传图片时，会创建一个图片标签并将其插入预览中。 “隐藏”类已从预览中删除，“隐藏”类已添加到 Dropbox。因此图像出现了。

单击删除图像时，从预览中删除，隐藏预览，并且从保管箱中删除“隐藏”类。即，该图像似乎已被删除。

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

这是路由节点文件的一部分（我使用multer 上传图片——不相关）

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"
    }  
    ....
    ....
}

有人有什么建议吗？当我说 reader.readDataAsURL 时，我想真正了解发生了什么（我认为这是保存文件的原因？？？）我已经阅读了一些 stackoverflow 帖子，但不太理解建议的解决方案或解释...

Answer 1

选择图像只会在浏览器中显示它，但不会实际上传。这只发生在表单提交之后。根据您的代码，用户点击“删除图片”按钮后，<input type="file" /> 保持不变，因此发送表单仍会上传图片。您需要按照此处所述实际清除该字段：Clearing <input type='file' /> using jQuery

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

我似乎无法弄清楚如何在上传图片后实际删除它。

为了删除图片在上传之后，大概是在“编辑事件”模式下，你必须发送表单数据表明该图片应该被删除，然后删除它服务器。

Answer 2

根据 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'));
});