일부 파일의 업로드가 실패합니다. 클라이언트가 여러 번 새로 고침 (CFS)

Question

양식 제출시 여러 파일을 업로드하고 있습니다.

<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> 

그리고

'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'... 엔티티를 생성의 .js :

이것은 이미지 업로드 입력 (HTML)이다. 그런 다음 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") 
     } 
    } 
} 

예 불완전한 파일 :

,691,363 (210)

{ 
    "_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; 
     } 
    }); 
} 

왜 이런 일이 무엇입니까? 다음 화면으로 넘어 가기 전에 파일 업로드가 완료 될 때까지 기다려야합니까? 문제가 있다면 어떻게합니까?

나는 유성을 처음 사용하여 어떤 도움을 주시면 감사하겠습니다.

Answer 1

kadira의 FlowRouter를 사용하지 않으므로 라우터 메커니즘이 경로 내에서 데이터를 보유 할 수 있기 때문에 리디렉션 문제에 대해 답변하는 것이 적절하지 않을 수 있습니다. 이는 매우 나쁜 것입니다. 최신 Meteor 규칙에 따라 구독은 템플릿 수준에서 구현되어야합니다.

하지만 이미지 업로드가 완료 될 때까지 기다릴 수 있음을 알려드립니다. 이미지가 성공적으로 업로드되면 다음 페이지로 리디렉션하거나 다른 작업 중 하나 일 수있는 다음 작업을 수행 할 수 있습니다.

다음은 이미지 업로드가 완료 될 때까지 기다리는 코드입니다. 기본 아이디어는 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); 
     } 
    }); 
}