Question

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

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

如下所示：

如果用户上传图像然后提交，我成功设法存储图像。当用户想要查看提交的事件时，将显示图像。

我的问题如下：

用户填写表单并上传图片
用户决定他不想要与事件相关联的图像
用户点击删除图片（图片似乎已被删除 - 即图片预览为灰色并显示“在此处删除图片或点击上传”）
1. 用户提交活动。
2. 用户观看事件。 “已删除”图片在那里。换句话说，图像永远不会被删除。

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

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

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

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

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

为了在之后删除图像，将其上传，大概是在＆＃34;编辑事件＆＃34;模式，您必须发送表单图像应该被删除的表单数据，然后在服务器上删除它。

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

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

2 个答案: