2016-07-24 30 views
1

我有這個函數需要將圖片上傳到Cloudinary,然後將組件的狀態設置爲生成的URL。這裏是什麼樣子:等待Meteor函數結果的最佳實踐?

loadFileFront: function(e) { 
 
     var imageFrontURL = window.webkitURL.createObjectURL(e.target.files[0]); 
 
     var imageFrontFile = e.target.files[0]; 
 
     var returnedURL = ''; 
 
     Cloudinary._upload_file(imageFrontFile, {}, function(err, res) { 
 
      if (err){ 
 
       console.log(err); 
 
       return; 
 
      } 
 
      console.log(res.url); 
 
     }); 
 
     this.setState({ 
 
      imageFront: returnedURL, 
 
      imageFrontFile: imageFrontFile 
 
     }) 
 
    },

(忽略與createObjectURL那頂線)。 我一直在研究如何最好地構造這個,以便setState等待上傳完成要返回的res.url,從而正確更新狀態。當我console.log res.url,幾秒鐘後它顯示出來。但是,當我嘗試將returnedURL設置爲res.url時,沒有等待,它只是向前跳過該函數的其餘部分。 等待Cloudinary上傳結果的最佳方式是什麼?我一直在閱讀有關Meteor 1.3中的異步/等待支持,但我一直無法弄清楚如何在服務器上的Meteor方法中配置Cloudinary上傳方法。任何幫助表示讚賞!

回答

0

如果我理解正確的問題,那麼這應該修復它。你想在回調中做一個胖箭頭函數,這樣你就可以正確地傳遞(this),並且不會有任何調用this.setState的問題。另外,由於imageFrontFile的鍵和值是相同的,因此可以在下面輸入它時使用它。希望有所幫助。

loadFileFront: function(e) { 
    var imageFrontURL = window.webkitURL.createObjectURL(e.target.files[0]); 
    var imageFrontFile = e.target.files[0]; 
    var returnedURL = ''; 
    Cloudinary._upload_file(imageFrontFile, {}, (err, res) => { 
     if (err){ 
      console.log(err); 
      return; 
     } 
     this.setState({ 
      imageFront: res.url, 
      imageFrontFile 
     }); 
    }); 
}, 
+1

謝謝,這最終成爲解決方案!只需要將正確的這個傳遞給setState即可。 –