javascript - 在 Meteor 中提交图像后清除表单

Question

我在我的 Meteor 应用程序中使用 CFS 上传文件，几乎一切正常，除了因为当我尝试上传另一张图片时，我在表单中看到我之前发送的图片，所以我需要在提交后清除该表单图片。我试过 .reset 但它不起作用。这是我现在的代码。感谢您的帮助。

NewImage.html

<template name="newImage">
    <div align="center">
      <form align="center">
        <div>
          <div>
            <span class="btn btn-success btn-file">
              <input type="file" accept=".gif,.jpg,.png" class="myFileInputimagepub" id="image"/>
            </span>
          </div>
          <div>
            <img src="{{currentUser.profile.image}}" alt="Image" width="60px" height="60px" class="img-circle avatar-upload" value=''/>
          </div>
        </div>
      </form>
    </div>
  </template>

NewImage.js

import './newImage.html';

Template.NewImage.events({
  'change .myFileInputimagepub':function(evt,tmpl){
    FS.Utility.eachFile(event,function(file){
      fileImagespub.insert(file,function(err,fileObj){
        if(!err){
          var userId = Meteor.userId();
          var imageurl = {
            'profile.image':'/cfs/files/fileimages/' + fileObj._id
          };
          setTimeout(function(){
            Meteor.users.update(userId,{$set:imageurl});
          },2000);
        }
      })
    })
  },

  'submit form':function(event,template){
    event.preventDefault();
    template.find("form").reset();
  }
});

Answer 1

如果有问题的图像是具有类 .img-circle 的图像，则问题在于它的 src 属性是动态提供的。当前为 currentUser.profile.image。这不会仅通过重置表单和手动清除图像的 src 值来清除，这将与框架作斗争。

选项 1(不理想):

如果您不想保留图像，请通过运行以下命令取消设置文件上传后所做的数据库更改:

Meteor.users.update(userId, { $set: { 'profile.image': null }});

这并不理想，因为它使您能够使用长期可能不需要的图像继续修改数据库。

此外，我假设您目前正在使用 autopublish/insecure 包。在公开您的应用程序之前，您需要删除它们，因为它们允许任何用户不受限制地更改数据库。

选项 2:

您可以将 'change .myFileInputimagepub' 事件的返回值保存为 ReactiveVar ，然后只有在您的用户提交表单时才实际运行 Meteor.users.update(最好在服务器上使用 Method )。那时您可以清除 react 变量。

使用 ReactiveVar 将允许您通过帮助程序将保存的 URL 提供给 src 属性，然后在您希望清除表单时更改 ReactiveVar 的值。

这里有一个操作 ReactiveVars 的简单示例:https://gist.github.com/ahoereth/a75d2d6528b1844ad503