在流星中提交图像后清除表格

Question

我正在使用CFS在Meteor App中上传文件，几乎所有工作都很好，除了因为当我尝试上传其他图像时，我在表单中看到了我以前发送的图像，因此在提交图像后需要清除该表单。 我尝试使用.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 }});

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

此外，假设您当前正在使用自动发布/不安全的软件包。 您需要在应用公开之前删除它们，因为它们允许任何用户无限制地更改数据库。

选项2：

您可以将'change .myFileInputimagepub'事件返回的值'change .myFileInputimagepub'为ReactiveVar ，然后在用户提交表单时才实际运行Meteor.users.update （最好在服务器上使用Method ）。 此时，您可以清除反应变量。

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

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