用node.js＆transloadit構建用戶頭像組件-js教程-PHP中文網

Building a User Avatar Component With Node.js & TransloadIt {{/if}}

請注意，我們包括一個包含用戶名的隱藏字段。我們將通過我們的請求發送將其發送到Trainsloadit，以便可以在我們的模板中使用。 >

現在添加JavaScript，從使用我們的JSON Handlebars助手開始一些可變初始化開始：

<span>var sig = {{{ json sig }}};</span>

登入後複製

現在，我們將transloadit插件綁定到上傳表格：>

這比我們之前查看的最小整合初始化更為複雜，所以讓我們一次瀏覽一下。

<span>$(function() {
</span>  <span>$('#avatar-form').transloadit({
</span>    <span>wait: true,
</span>    <span>params: JSON.parse(sig.params),
</span>    <span>signature: sig.signature,
</span>    <span>fields: true,
</span>    <span>triggerUploadOnFileSelection: true,
</span>    <span>autoSubmit: false,
</span>    <span>onSuccess: function(assembly) {
</span>      <span>$('img#avatar').attr('src', assembly.results.thumbnail[0].url + '?' + (new Date()).getTime() );
</span>      <span>var derivatives = {
</span>        <span>thumbnail : assembly.results.thumbnail[0].url,
</span>        <span>medium : assembly.results.medium[0].url,
</span>        <span>large : assembly.results.large[0].url
</span>      <span>};
</span>      $<span>.ajax({
</span>        <span>type: 'post',
</span>        <span>url: '/avatar',
</span>        <span>data: derivatives,
</span>        <span>success: function(resp){
</span>          <span>console.log(resp);
</span>        <span>}
</span>      <span>})
</span>    <span>}
</span>  <span>});
</span><span>});</span>

登入後複製

>我們正在從SIG變量中汲取參數和簽名，該變量我們在服務器上生成，然後編碼為JSON。由於參數部分是嵌套的，因此我們使用JSON.PARSE（）將其轉換為對象，從該對象將Transloadit從中提取相關參數。

>在插件初始化中，等待設置為true，這意味著我們要等到兩個文件都已上傳

>和

它們已經處理過。

> 使用彙編通知（您可以在高級用法部分稍後閱讀）意味著您不一定需要等待文件進行處理，在這種情況下，您可以將其設置為false。

>字段設置為true，以告訴插件我們要在發送文件處理時要包含其他信息；在我們的情況下，這是一個名為用戶名的隱藏表單字段，我們將使用身份驗證的用戶的用戶名填充。
> 用戶選擇文件，而不是在提交表單時，使用
> triggeruploadonfileselection將文件發送到發送載荷。一旦結果從Transloadit返回，AutoSubmit就可以防止其提交表格，因為我們將自己手動執行此操作。

> 當數據從TransloadIt返回時，彙編對象包含一個結果屬性，進而包含我們每個“步驟”的屬性。這些包含一個文件對象。由於我們僅上傳一個文件，因此它們將是包含一個項目的數組。每個文件對像都包含許多屬性，包括原始文件名稱，元信息，transloadit的唯一ID以及其他位和零件。要查看全部信息，您可能希望將其記錄到控制台中並查看。但是，我們真正感興趣的只是URL屬性，該屬性包含S3上生成圖像的URL。

或者，您可能希望使用SSL_URL屬性，該屬性與URL相同，但與HTTPS相同。

>我們只是通過相應的派生名稱提取三個URL，然後創建三個衍生物的哈希及其相應的URL。為了向用戶提供視覺反饋，我們還抓住了縮略圖的URL，並在頁面上修改了頭像以顯示新的刪除圖像。

>最後，我們使用Ajax將數據默默發布回我們的應用程序。

這是捕獲該數據的頭像路線：

在生產中，您可能想對此進行消毒和驗證。

如您所見，我們採集衍生圖像及其URL的哈希，從req.user獲取當前身份驗證的用戶，將Avatar屬性設置為提供的哈希，然後更新用戶模型。

這只是一種可能的方法。為了獲得更快的反饋，您可能需要使用插件的on Result回調來獲取縮略圖，而不是等待所有三個導數。您可能不喜歡使用“客戶代碼”通知服務器的AJAX調用，而是更喜歡使用“彙編通知”功能，這為在後台運行彙編而不是在客戶端上執行執行提供了其他好處。請諮詢插件文檔以獲取各種選項。

>總結了我們的基本應用。別忘了，所有來源（包括身份驗證機制）都在GitHub上結束。

<span>var sig = {{{ json sig }}};</span>

登入後複製

高級用法

在總結之前，讓我們簡要介紹一下Transloadit的幾個更高級的方面。

其他客戶端選項

>您不必使用提供的jQuery插件。在文檔的“社區項目”部分中，您會發現許多替代方案，包括用於bootstrap的插件，一個用於拖動n'drop，一個角度插件或對普通舊Xhr的支持等等。

> XHR可能值得您更詳細地研究。這是一種裸露的解決方案，可以提供足夠的靈活性，同時要求您提供自己的反饋，例如某種上傳指示器。還值得注意的是，一旦上載文件，它將通過以1000ms的間隔進行輪詢服務器來確定何時完成組件。

>通知

>您可以在文件準備就緒時使用通知來使用通知來處理應用程序。使用這種方法，用戶只需要等到上傳完成。

> 從消費者的觀點易於實現

>通知；只需將Notify_url與您的彙編說明一起包含：

<span>var sig = {{{ json sig }}};</span>

登入後複製

當您的URL被Transloadit刺穿時，提供的JSON將包含一個簽名字段，您可以使用該字段來驗證通知確實來自它們。只需使用您的euth Secret解碼簽名。

在開發過程中，您可能希望利用此代理包，以測試您的裝配通知或使用隧道服務，例如Ngrok。

摘要

在這個兩部分的系列中，我們對transloadit進行了全面研究。

在第一部分中，我們經歷了一些優點和缺點，然後查看了關鍵概念。

在這一部分，我們弄髒了手，並使用jquery，node.js和express構建了一個簡單的用戶頭像組件。

>您不僅限於jQuery，實際上，您可以自由使用香草JavaScript解決方案或您喜歡的框架。您甚至不需要從客戶端應用程序中使用它，而在服務器端技術方面，您有多種選擇。不過，希望您現在已經對如何用於圖像處理有所了解。

您是否在項目中使用Transloadit？您知道更好的服務嗎？在評論中讓我知道。

>常見問題（常見問題解答）關於node.js中的用戶avatar組件，帶有transloadit

>如何自定義AVATAR在Node.js中的外觀？您可以更改頭像的大小，形狀和顏色。例如，要更改大小，請調整“調整大小”參數。要改變形狀，請使用“作物”參數。您還可以分別使用“水印”和“文本”參數在頭像上添加水印或覆蓋文本。

>如何在Neal-World應用程序中使用Transloadit中的Node.js中實現用戶Avatar組件？

在現實世界應用程序中實現用戶頭像組件涉及將其集成到應用程序的用戶註冊或配置文件更新過程中。當用戶註冊或更新其配置文件時，您可以根據用戶的詳細信息使用Transloadit來生成頭像。然後，您可以將阿凡達的URL存儲在數據庫中，並在需要顯示用戶的頭像的任何地方使用它。

>在使用transloadit用於用戶avatar生成時如何處理錯誤？ Transloadit涉及聆聽組件中的錯誤事件。如果在組裝過程中發生錯誤，則Transloadit將發出“錯誤”事件。您可以聆聽此活動並適當處理它。例如，您可能需要記錄錯誤，通知用戶或重試彙編。

>我可以在非node.js環境中使用transloadit用於用戶頭像生成嗎？和Java。您可以使用這些API將traadlotit集成到您的nonnode.js應用程序中。

>如何通過Transloadit？ Transloadit涉及對您的組裝說明進行微調並有效地管理您的資源。例如，您可以減小生成的頭像的大小，以節省帶寬和存儲空間。您還可以使用TransLoadit的“ auto_retry”功能自動重試的失敗的組件，從而可以提高您的頭像生成過程的可靠性。

>我如何測試帶有transloadit的node.js中的用戶avatar組件？

測試用戶頭像組件涉及為您的彙編說明創建單元測試，並為應用程序與Transloadit集成的集成測試。您可以為此目的使用摩卡咖啡或嘲笑等測試框架。您還可以使用模擬服務在測試過程中模擬transloadit的行為。

>如何使用transloadit？

>使用transloadit確保用戶頭像生成過程涉及使用安全的URL來使用安全URL您的組件並保護您的traxloadit API鍵。您可以使用TransLoadit的“簽名身份驗證”功能來確保只有授權客戶端才能創建彙編。您還應該安全地存儲transLoadit api鍵，並且永遠不要將它們曝光在客戶端代碼中。

我可以將transloadit用於其他媒體處理任務以外的其他媒體處理任務嗎？多功能媒體處理服務，除了用戶頭像生成以外，它還支持廣泛的任務。您可以將其用於圖像和視頻處理，文件上傳等。您甚至可以在單個組件中將多個任務鏈在一起以創建複雜的媒體處理工作流程。

如何通過TransloadIt？

>監視用戶Avatar生成的進度，如何監視用戶頭像生成的進度？隨著Transloadit的涉及聆聽組裝中的進度事件。 Transloadit在組裝過程中定期發射“進度”事件。您可以收聽這些事件並更新應用程序的UI以反映當前的進度。