<b>本文講的是如何用 React 完成圖檔上傳功能？，</b>
<b></b>
對于 web 開發者來說，讓使用者能夠上傳圖檔是一件很常見的事情。一開始可能看起來小菜一碟，但是當真正建立一個圖檔上傳元件的時候，還是有些問題需要去考慮的。這裡有一些注意事項：
允許什麼類型的圖檔上傳?
需要多大的圖檔? 這對性能有何影響?
圖檔長寬比例應該是多少?
如何管理圖檔? 能撲捉到不良圖檔嗎?
圖檔存儲在哪? 如何運維?
這是我們将要建構的應用的一個小樣品。
我用到了下面三個工具:
Cloudinary 是一個可以為圖檔提供存儲、操作、管理、提供功能的雲服務。我選擇使用 Cloudinary 是因為它提供的免費賬戶包含了所有我所需要的功能。你至少需要一個免費帳戶才能開始。
假如說你想裁剪，調整大小并給上傳的圖檔增加濾鏡。Cloudinary 有個_轉換_的概念，和修改圖檔功能連結在一塊的，不管你需不需要。一旦上傳，就會轉換、修改然後存儲新的圖檔。
在 Cloudinary 控制台中，找到 Settings > Upload，然後選擇 “Upload presets” 下方 的 “Add upload preset”。
下一步，将 “Mode” 改成 “Unsigned”。這是必須的，然後你就可以不需要使用伺服器端語言來處理私鑰也能直接上傳到 Cloudinary 了。
在 “Incoming Transformations” 部分選擇 “Edit” 可以添加任何轉換。 你可以裁剪、調整大小、改變品質、旋轉、濾鏡等等。儲存預設，這就行了！你現在有地方上傳、處理、存儲圖檔了，能夠為你的應用程式提供圖檔服務了。注意預設名稱，我們稍後将用到它。讓我們進入代碼部分吧。
首先，安裝依賴。在指令行中輸入下面的指令，運作：
然後在你的元件中導入 <code>React</code>、 <code>react-dropzone</code> 和 <code>superagent</code>。我使用 ES6 <code>import</code> 文法。
我們稍後會用到 <code>superagent</code>。現在，在你的元件 render 方法中包含一個 <code>react-dropzone</code> 執行個體。
以下是這個元件的一些概要:
<code>multiple={false}</code> 同一時間隻允許一個圖檔上傳。
<code>accept="image/*"</code> 允許任何類型的圖檔。你可以明确的限制檔案類型，隻允許某些類型可以上傳， 例如<code>accept="image/jpg,image/png"</code>。
<code>onDrop</code> 是一個方法，當圖檔被上傳的時候觸發。
現在，讓我們設定當上傳一個圖像時，做某些事情的方法。
首先，為兩條重要的上傳資訊設定一個 <code>const</code> 。
上傳預設 ID (當你建立了上傳預設時自動生成)
你的 Cloudinary 上傳 URL
然後，增加一條記錄到元件初始化 state （使用 <code>this.setState</code>）；我給這個屬性起了個名字 <code>uploadedFileCloudinaryUrl</code>。最終，這将存放一個上傳成功後由 Cloudinary 生成的圖檔 URL。我們稍後會用到這條 state。
<code>react-dropzone</code> 文檔說它總是傳回一個上傳檔案的數組，是以我們将該數組傳遞給 <code>onImageDrop</code> 方法的 <code>files</code> 參數。我們設定了一次隻能傳一張圖檔，是以圖檔總是在數組的第一個位置。
在 <code>.end</code> 回調中，列印所有傳回錯誤的同時，最好也告訴使用者出現了一個錯誤。
接下來，我們接收到的響應中包含一個 URL，檢查下它是不是一個空字元串。這就是圖檔被上傳，處理後 Cloudinary 生成的一個 URL。舉個例子，如果一個使用者正在編輯他的資料，上傳了一張圖檔，你可以将 Cloudinary 傳回的新的圖檔 URL 儲存到你的資料庫中。
我們目前寫的代碼，支援使用者拖拽一張圖檔，元件将圖檔發送到 Cloudinary，然後收到一個給我們用的轉換後的圖檔 URL。
元件最後一部分是一個 <code>div</code>，可以預覽上傳後的圖檔。
如果 <code>uploadedFileCloudinaryUrl</code> state 是一個空字元串，三元運算符将輸出 <code>null</code> （什麼都沒有）。回想下，元件的<code>uploadedFileCloudinaryUrl</code> state 預設是一個空字元串；這就意味着元件渲染時，這個 <code>div</code> 将是空的。
然而，當 Cloudinary 傳回一個 URL，state 不再是空字元串，因為我們在 <code>handleImageUpload</code> 更新了 state。此時，該元件将重新渲染，顯示上傳的檔案名稱和變換後的圖像的預覽。
This is just the groundwork for an image upload component. There are plenty of additional features you could add, like:
這隻是為圖檔上傳元件做的準備工作。有很多可以添加的附加功能，比如：
允許多圖檔上傳
清除上傳的圖檔
如果因為某些原因上傳失敗，展示錯誤
使用移動裝置相機作為上傳源
目前為止，這些設定已經滿足我工作的需求了。寫死上傳預設不是完美的，但我還沒有碰到任何問題。
<b>原文釋出時間為：2016年08月21日</b>
<b>本文來自雲栖社群合作夥伴掘金，了解相關資訊可以關注掘金網站。</b>