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'事件中返回的值保存为ReactiveVar，然后仅在用户实际运行Meteor.users.update时（最好在服务器上使用Method）提交表格。此时，您可以清除反应变量。

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

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

在Meteor中提交图片后清除表单

1 个答案:

选项1（不理想）：

选项2：