使用node.js預覽上傳的圖像文件

Question

在express.js應用程序中，我有一個帶有一些字段的表單，其上是一個上傳圖像字段。

當用戶瀏覽他的圖像文件並選擇一個時，我想在表單提交前在「預覽塊」中顯示此文件。

我認爲這些行動：

1. 單擊瀏覽按鈕
2. 選擇
3. 文件已經選擇了一個文件=>上傳，重命名，調整大小，裁剪並保存它在/tmp目錄
4. 顯示新文件中的預覽塊
5. 表單驗證=>移動在相應的應用程序的目錄重命名的文件

我正在尋找實現此過程的最佳方法。

Answer 1

解決此問題的步驟。

1. 使用輸入型文件在HTML文件。

   <input id="upload_images" type="file" multiple="multiple"> 
   

2. 將事件偵聽器添加到輸入類型文件的更改事件。

   if(document.addEventListener) { 
       document.getElementById("upload_images").addEventListener("change", function(e){ 
        uploadImages(e); 
       }); 
   } 
   else { 
       document.getElementById("upload_images").attachEvent("onchange", function(e){ 
        uploadImages(e); 
       }); 
   } 
   

3. 當文件由用戶選擇，建立表單數據，並使用AJAX其發送到服務器（Mutipart數據）。

   function uploadImages(e) { 
       var uploadedFiles = e.target.files; 
       var xhrObj = new XMLHttpRequest(); 
       xhrObj.open('POST', "<<your node>>/<<request URI>>", true); 
       xhrObj.onreadystatechange = function() { 
        if(this.readyState == this.DONE) { 
         if(this.status != 200) { 
          // Show Error 
         } 
         else { 
          var returnedResponse = xhrObj.responseText; 
          if(returnedResponse == 'success') { // check your returned data like I was returning "success" 
           // Success - Do the tasks 
          } 
         } 
        } 
       }; 
       var requestFormData = new FormData(); 
       for(var i=0; i<uploadedFiles.length; i++) { 
        requestFormData.append('data', uploadedFiles[i]); 
       } 
       xhrObj.send(requestFormData); 
   } 
   

4. 在服務器上（的NodeJS）使用強大接收文件/上傳的文件，並將其存儲，無論你想。

   // require formidable 
   // require imagemagick 
   function processUploadImages(req, res) { 
       var form = new formidable.IncomingForm(); 
       form.uploadDir = __dirname+'/uploaded_images/; 
       form.maxFieldsSize = 20 * 1024 * 1024; 
       form.keepExtensions = true; 
       form.onPart = function(part) { 
        form.handlePart(part); 
       } 
       form.on('file', function(name, file) { 
        // Handle file data like: 
        // file.path 
        // file.name 
       }); 
       form.on('end', function() { 
        //show complete 
       }); 
       form.parse(req, function(error, fields, files) { 
        // create thumbnail images 
        // return response 
       });  
   } 
   

5. 在服務器（的NodeJS）創建使用的ImageMagick的縮略圖圖像，並將其存儲，其可以位於任何地方的文件夾。

6. 將保存的（圖像和縮略圖）鏈接發回給回覆。

7. 創建一個圖片標籤並在src標籤中使用這些鏈接。