文件上传实现【单文件、多文件】

-------------------------------------------------------3.12更新 整理做成插件----------------------------------

demo地址:http://halvee.com/demo/upload/index.html

demo源码:https://github.com/halvee-L/demo-upload

----------------------

平时上传功能都习惯采用框架工具  如jquery-Uploadify,element-ui的upload组件等

偶得空闲，自己研究研究  记录下来，方便以后使用

前端通过input[type=“file”]实现文件获取上传，后端采用nodejs+formidable实现文件接收

----------------------------------------------------------------------------------------------------------

html片段【VUE】

<div id="app">
    <fieldset>
      <div>单文件上传</div>
      <input id="input_file" type="file" />
      <button @click="upload">上传</button>
    </fieldset>
    <fieldset>
      <div>多文件上传</div>
      <input id="inpu_file_multiplt" multiple="multiplt" type="file" />
      <button @click="upload_multiplt">上传</button>
    </fieldset>
  </div>

js实现

 upload() {
      let $file = document.getElementById("input_file");

      let formdata = new window.FormData();
      formdata.append("file", $file.files[0]);
      upload(formdata);
    },
    upload_multiplt() {
      let $file = document.getElementById("inpu_file_multiplt");

      let formdata = new window.FormData();
      formdata.enctype = "multipart/form-data";

      [].forEach.call($file.files, file => {
        formdata.append("file", file);
      });
      upload(formdata);
    }

实现XMLHttpRequest接口请求

const post = data => {
  let xhr = new XMLHttpRequest();
  xhr.open("post", data.url);
  xhr.onreadystatechange = function(e) {
    if (xhr.readyState == 4 && xhr.status == 200) {
      data.success(e, xhr);
    } else {
      data.fail(e, xhr);
    }
  };
  xhr.upload.onprogress = function(event) {
    data.progress(event);
  };
  xhr.upload.onloadstart = function(event) {
    data.start(event);
  };
  xhr.send(data.data);
};
const upload = data => {
  post({
    url: "http://localhost:9000/upload",
    data: data,
    success() {
      console.log("success");
    },
    fail() {
      console.log("fail");
    },
    start() {
      console.log("start");
    },
    progress(e) {
      console.log("progress", e);
    }
  });
};

NODE服务端实现 

var http = require("http");

var fs = require("fs");

var path = require("path");

var formidable = require("formidable");

var server = http.createServer();

server.on("request", (request, response) => {
  response.writeHead(200, {
    "Access-Control-Allow-Origin": "*",
    "Access-Control-Allow-Methods": "PUT, GET, POST, DELETE, OPTIONS",
    "Access-Control-Allow-Headers": "X-Requested-With",
    "Access-Control-Allow-Headers": "Content-Type"
  });

  if (request.url === "/upload") {
    var form = new formidable.IncomingForm();

    form.uploadDir = "./test";
    form.keepExtensions = true;
    form.multiples = true; // 多先文件实现 
    form
      .on("field", function(name, value) {
        console.log("fied...");
      })
      .on("file", function(name, file) {
        console.log("name....", file);
      })
      .on("end", function() {
        response.end("end");
      });
    form.parse(request, (err, fields, files) => {
      let file = files.file;
      if (file) {
        let _files = Array.isArray(file) ? file : [file];

        for (let i = 0, len = _files.length; i < len; i++) {
          file = _files[i];
          var ran = parseInt(Math.random() * 10000 + 100);
          //拿到扩展名
          var extname = path.extname(file.name);
          //旧的路径
          var oldpath = __dirname + "/" + file.path;
          //新的路径
          var newpath = __dirname + "/test/" + Date.now() + ran + extname;
          console.log(newpath, oldpath);
          //改名
          fs.rename(oldpath, newpath, function(err) {
            if (err) {
              throw Error("改名失败");
            }
            // response.writeHead(200, { "content-type": "text/plain" });
            response.end("成功");
          });
        }
      }
    });
  }
});

server.listen(9000);

至此，简单的上传文件功能基本实现。

--------------------------------------------------可耻的分隔线------------------------------------------------------------

此处多文件上传通过一个FormData数据上传，在处理上传进度时，只能监测整体进度，无法查看单个文件上传进度 ，想实现多文件同时上传查看进度以及取消功能，研究了许久也没办法（大佬 ！大佬！求赐教！）。只能通过拆分文件单个upload操作。