Formidable文件上传

最新推荐文章于 2022-10-30 22:35:17 发布

寒岁青松

最新推荐文章于 2022-10-30 22:35:17 发布

阅读量2.3k

点赞数

分类专栏： Node.js

本文链接：https://blog.csdn.net/hansuiqingsong/article/details/40405969

版权

Node.js 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

这是一个使用formidable模块实现单个文件上传的案例。再次记录一下

step1: 进入workspace, 执行

express -e fmp
cd fmp
npm install
npm install formidable --save

step2: 修改index.ejs

//index.ejs

<!DOCTYPE html>
<html>
  <head>
    <title>文件上传</title>
    <style type="text/css">
      .upload-button {

      }

      .upload-box {
        display: none;
      }

      .upload-info {
        display: none;
      }

      .upload-box label {
        width: 50px;
        display: inline-block;
      }

    </style>
  </head>
  <body>
    <h1>文件上传</h1>
    <button class="upload-button" id="showUpload">点击上传</button>
    <div class="upload-box" id="fileUploadFrom">
      <label for="name">Name</label>
      <input type="text" name="name" id="name"/><br/>
      <label for="file">File</label>
      <input type="file" name="file" id="file"/><br/>
      <button id="upload">Upload</button>
    </div>
    <div class="upload-info">
      <progress value="0" max="100"></progress>
      <span class="progress-value">0</span>
    </div>
  </body>

  <script type="text/javascript" src="/jquery/dist/jquery.js"></script>
  <script type="text/javascript" src="/javascripts/file.js"></script>
</html>

step3: 在public/javascripts/下创建file.js

// file.js

$(document).ready(function() {

  $('#showUpload').on('click', function(e) {
    $('.upload-box').show(300);
  });

  $('#upload').on('click', function(e) {
    var formData = new FormData();
    formData.append('file', $('#file').prop('files')[0]);
    formData.append('name', $('#name').val());
    $.ajax({
      url: "/files/upload",
      cache: false, //设置为 false 将不会从浏览器缓存中加载请求信息
      contentType: false, //(默认: "application/x-www-form-urlencoded") 发送信息至服务器时内容编码类型
      processData: false, //默认情况下，发送的数据将被转换为对象(技术上讲并非字符串) 以配合默认内容类型 "application/x-www-form-urlencoded"。如果要发送 DOM 树信息或其它不希望转换的信息，请设置为 false。
      data: formData,
      type: 'post',
      xhr: function() {
        var myXhr = $.ajaxSettings.xhr();
        if(myXhr.upload){ // Check if upload property exists
        myXhr.upload.addEventListener('progress', progressHandlingFunction, false); // For handling the progress of the upload
        }
        return myXhr;
      },
      beforeSend: function() {
        $('.upload-info').show();
      },
      success: function(xhr) {
        console.log(xhr);
      },
      error: function(err) {
        console.log('error');
      }
    })
  });

  var $progressValue = $('.progress-value');
  var $progressBar = $('progress');
  function progressHandlingFunction(e) {
    if(e.lengthComputable){
      console.log('value = ' + e.loaded + ', total = ' + e.total);
      var value = Math.floor(e.loaded/e.total * 100);
      $progressBar.val(value)
      $progressValue.text(value + '%');
    }
  };

});

step4: 编写 /router/index.js模块

var config = require('../config');
var express = require('express');
var router = express.Router();
var formidable = require('formidable');

/* GET home page. */
router.get('/', function(req, res) {
  res.render('index', { title: 'Express' });
});

router.post('/files/upload', function(req, res, next) {
  var form = formidable.IncomingForm();
  form.encoding = 'utf-8';
  form.uploadDir = config.uploadDir;
  form.keepExtensions = true;
  // form.maxFieldsSize = 2 * 1024 * 1024; // 单位为byte

  form.on('progress', function(bytesReceived, bytesExpected) {
    var progressInfo = {
      value: bytesReceived,
      total: bytesExpected
    };
    console.log('[progress]: ' + JSON.stringify(progressInfo));
    res.write(JSON.stringify(progressInfo));
  }); 

  form.on('end', function() {
    console.log('end'); 
    res.end('success');
  });

  form.on('error', function(err) {
    console.error('upload failed', err.message);
    next(err);
  })

  form.parse(req);
});

module.exports = router;

step5: 启动项目 npm start

在浏览器输入 http://localhost:3000/，就可以测试啦！