Question

最近我遇到了如何使用AJAX将文件上传到NodeJS服务器的问题，所以经过多次努力，我终于成功了。

我在一些开发者的空间上发布了问题以获得帮助，我想与其他人分享我的解决方案。

设置：

服务器：Node.JS
查看引擎：vash
上传者模块：multer

**，首先，我安装模块**：npm install multer --save

**其次我设置了APP.JS文件：**

...

var multer = require('multer');

...

//Muler manager 
var storage = multer.diskStorage({
  destination: 'public/uploads/',
  filename: function (req, file, cb) {
    cb(null, Date.now()+"-"+file.originalname)
  }
});

var upload = multer({ storage: storage })
app.use(upload.array('files'));

第三条路线«index.js»

router.post('/upload', function(req, res, next) {

  //We check the content   
  if(req.files){

    //temporary files array
    var files= [];

    var i = 0,
        len = req.files.length;

    req.files.forEach(function (file, index) {

      i++;

     let file = {
        name : file.filename,
        size : file.size,
        type : file.type,
        path : file.path
      }

      files.push(file);

      if(i == len){ 
          res.send(files);
      }
    })

  }else{
    res.send("Any file uploaded";);
  }

})

第四，关于upload.vash（客户端视图）

@html.extend('layout', function(model){
    @html.block('renderbody', function(model){
        <div class="">
            <div class="row">
                <div class="col-xs-12">
                    <a class="upload-btn">UPLOAD</a>
                    <div class="progress">
                        <div class="progress-bar" role="progressbar"></div>
                      </div>
                    <input id="fichiers" type="file" name="fichiers" style="display: none" /><br>
                    <ul id="image-list">
                    </ul>
                </div>
            </div>
        </div>
    })
})

第五，关于loader.js（客户端）

$('.upload-btn').on('click', function () { 


    $('#fichiers').click();

    var input = document.getElementById("fichiers");

    input.addEventListener('change', function(){ 


        var formData = new FormData(),
            file, 
            reader,
            sortie = false; 

        if(input.files.length > 0){

            file = input.files[0]; 
            sortie = true; 
        }

        //And we add the file to  formData object
        //This last will have key "files" And value "the file"
        formData.append('files', file, file.name);  

        //We check the get out condition
        if(true){

            //On exécute la requête ajax
            $.ajax({
                url : '/upload',
                type : 'POST',
                data : formData,
                processData: false,  // tell jQuery not to process the data
                contentType: false,  // tell jQuery not to set contentType
                success : function(data) {


                    console.log(data);
                }
            });
        }

        input.value="";
    })

});

**注意：** loader.js和其他文件（JS和CSS）的链接已插入 layout.vash 文件中。

此致

使用Ajax在NodeJS服务器上上传文件的方法

0 个答案: