上傳失敗的一些文件，客戶端刷新多次（CFS）

這是圖像上載輸入（HTML）：

<form class="form-inline" id="cost-estimate-form"> 
     <div class="form-field-short col s12 m6"> 
      <i class="material-icons prefix">insert_photo</i> 
      <label for="input-file">Upload photos</label> 
      <input id="input-file" type="file" name="images" accept="image/jpeg, image/png, application/pdf" multiple/> <!-- todo: ugly on safari --> 
     </div> 
<!-- rest--> 
     <button class="btn waves-effect col s6 m3 offset-m6" type="submit" name="action">Submit 
      <i class="material-icons right">send</i> 
     </button>

而的.js

'submit #cost-estimate-form': function(event, tmpl){ 
    event.preventDefault(); 

    let files; 
    if(event.target.images) { 
     files = event.target.images.files; 
    } 
    Meteor.call('travelRequests.insert', tmpl.data, function(err, trId) { 
     if (err) { 
      alertError(err.message); 
     } 
     else { 
      if (files) { 
       var imageDetails = []; 
       for (var i = 0, j = 0, ln = files.length; i < ln; i++) { 
        Image.insert(files[i], function (err, fileObj) { 
         if (err) { 
          console.log('Error uploading image: '); 
          console.log(err); 
         } else { 
          console.log('[DB] insert image(id=' + fileObj._id); 
          j++; 
          let imagePath = '/uploads/images-' + fileObj._id + '-' + fileObj.name(); 
          imageDetails.push({id: fileObj._id, name: fileObj.name(), path: imagePath}); 
          if (j === ln) { // when last file is successful 
           Meteor.call('travel.addImages', trId, imageDetails, 
            function (err, _) { 
             if (err) alertError(err.reason); 
            }); 
           console.log('travel.addImages'); 
          } 
         } 
        }); 
       } 
      } 
     } 
    }); 

    Router.go('travel_requests_list');

Meteor.call('travelRequests.insert'...創建的實體。然後，我嘗試在上傳Meteor.call('travel.addImages',...文件後更新爲該實體上傳的圖像。

但是，單擊提交表單上的按鈕時，下一個屏幕刷新多次，我在客戶端得到錯誤：

cfs_power-queue.js:525 Error: "Queue" network [undefined], Error 
at cfs_upload-http.js:382 
at cfs_upload-http.js:108 
at underscore.js:794 
at XMLHttpRequest.xhr.onreadystatechange (cfs_upload-http.js:167)

而在MongoDB中，一些文件被完全上傳，有些則不是：

實施例完整的文件：

{ 
    "_id" : "MEWTZaXLX9gvx5utc", 
    "original" : { 
     "name" : "IMG_3867.JPG", 
     "updatedAt" : ISODate("2017-07-19T02:57:55Z"), 
     "size" : 4231984, 
     "type" : "image/jpeg" 
    }, 
    "uploadedAt" : ISODate("2017-09-15T02:30:40.204Z"), 
    "copies" : { 
     "images" : { 
      "name" : "IMG_3867.JPG", 
      "type" : "image/jpeg", 
      "size" : 4231984, 
      "key" : "images-MEWTZaXLX9gvx5utc-IMG_3867.JPG", 
      "updatedAt" : ISODate("2017-09-15T02:30:40Z"), 
      "createdAt" : ISODate("2017-09-15T02:30:40Z") 
     } 
    } 
}

實施例不完整的文件：

{ 
    "_id" : "cgHcSCRPvzgekW6Ai", 
    "original" : { 
     "name" : "IMG_3869.JPG", 
     "updatedAt" : ISODate("2017-07-19T02:58:10Z"), 
     "size" : 4108047, 
     "type" : "image/jpeg" 
    }, 
    "chunkSize" : 2097152, 
    "chunkCount" : 1, 
    "chunkSum" : 2 
}

集合定義：

Image = new FS.Collection("images", { 
    /* the file director: .meteor/local/uploads */ 
    stores:[new FS.Store.FileSystem("images",{path:Meteor.settings.uploadRoot+"/uploads"})], 
    filter: { 
     allow: { 
      contentTypes: ['image/*', 'application/pdf'] //allow only images and pdf in this FS.Collection 
     } 
    } 
}); 

if(Meteor.isServer){ 
    Image.allow({ 
     'insert': function() { 
      return true; 
     }, 
     'update': function() { 
      return true; 
     }, 
     'download':function(){ 
      return true; 
     } 
    }); 
}

爲什麼會出現這種情況？在路由到下一個屏幕之前是否應該等待文件上傳完成？如果這是問題，我該怎麼做？

我是新來的流星，所以任何幫助表示讚賞。

來源

2017-09-15 nakiya

在此處發佈您的收藏定義。 –

@AnkurSoni：完成。請檢查。 – nakiya

您使用btw的流星的哪個版本？我想這似乎很古老。 –

由於您沒有使用kadira的FlowRouter，因此我可能不是正確的人員來回答有關重定向問題，因爲路由器機制可以保存路由中的數據，這也是非常糟糕的。根據最新的Meteor慣例，Subscription必須在模板級實施。

但是，我可以告訴你，你可以等待完成圖像上傳。當圖像上傳成功後，您纔可以執行下一個操作，該操作可以重定向到下一頁或任何其他操作。

下面是等待完成圖片上傳的代碼。基本的想法是僅在圖像上傳完成時生成圖像的url。所以我們等待生成url，一旦我們收到url，這意味着我們完成了。

var myImage = event.target.images.files[0]; 
if(myImage){ 
    var myFile = new FS.File(myImage); 
    Images.insert(myFile, function(err, result){ 
     if(!err){ 
     var liveQuery = Images.find(result._id).observe({ 
     changed: function(newImage, oldImage) { 
      if (newImage.url() != null) { 
      liveQuery.stop(); 
      // Here the image is uploaded successfully. 
      } 
     } 
     }); 
     } else { 
     //console.log(err); 
     } 
    }); 
}

來源

2017-09-15 07:02:37

上傳失敗的一些文件，客戶端刷新多次（CFS）

回答

相關問題