javascript - 使用node.js预览上传的图像文件

Question

在express.js应用程序中，我有一个包含一些字段的表单，其中一个是上传图像字段。

当用户浏览他的图像文件并选择一个时，我想在表单提交之前在“预览 block ”中显示该文件。

我想到了这些行动:

1. 点击浏览按钮
2. 选择文件
3. 文件已选择 => 上传、重命名、调整大小、裁剪并将其存储在 /tmp 中目录
4. 在预览 block 中显示新文件
5. 表单验证 => 将重命名的文件移动到相应的应用目录中

我正在寻找实现此过程的最佳方法。

Answer 1

解决此问题的步骤。

1. 在 HTML 文件中使用输入类型文件。

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

2. 为输入类型文件的change事件添加事件监听。

   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将其发送到服务器(多部分数据)。

   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)上使用formidable来接收上传的文件并将其存储在任何你想要的地方。

   // 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 标签中使用这些链接。