上傳之前獲得圖像的大小作出反應

Question

期望的結果在香草已經完成here

要清楚，我不會使用alert()，我想打尺寸的state對象。

如何在OnChange()事件處理程序下的React中重新創建此代碼？

---

Answer 1

我有一個imgsrc，看起來是這樣的：

我能夠用代碼來解決這個問題這樣

if (e.target.files && e.target.files[0]) { 
    var img = document.createElement("img"); 
    this.state.backgroundImageFile = e.target.files[0]; 

    img.onload = function() { 
    debugger; 
    console.log(this.width + " " + this.height); 
    }); 

    var reader = new FileReader(); 
    reader.onloadend = function (ended) { 
    img.src = ended.target.result; 
    } 
reader.readAsDataURL(e.target.files[0]); 
} 

Answer 2

陣營依然是JavaScript中，你經常JS做一切可以做反應。在很高的層面上，React只是幫助您創建更多模塊化可重用代碼的框架。

就這麼說，作爲一名React開發人員，您應該首先創建上傳過程，然後讓其在單獨的類中工作。該班可以通過其道具接受圖片。然後，一旦工作正常，您可以創建一個更高階的組件來封裝上傳組件，或者接收上傳組件作爲參數並檢查圖像大小。此時您可以返回無效組件或僅處理圖像並上傳。

您可能想查看一些關於React入門的教程。 這是一個良好的開端egghead.io