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

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