发布时间：2019-08-05 03:17:05
把index.js修改成下面的样子,这是个标准的官网上传事例，不理解的在官网看下api，很好理解（其实看变量名字也都能理解~）
$(document).ready(function() { var uploader = new plupload.Uploader({ runtimes: 'html5,flash,silverlight,html4', browse_button: 'pickfiles', // you can pass an id... container: document.getElementById('container'), // ... or DOM Element itself url: '/', flash_swf_url: '../js/Moxie.swf', silverlight_xap_url: '../js/Moxie.xap', filters: { max_file_size: '10mb', mime_types: [{ title: "Image files", extensions: "jpg,gif,png" }, { title: "Zip files", extensions: "zip" }] }, init: { PostInit: function() { document.getElementById('filelist').innerHTML = ''; document.getElementById('uploadfiles').onclick = function() { uploader.start(); return false; }; }, FilesAdded: function(up, files) { plupload.each(files, function(file) { document.getElementById('filelist').innerHTML += '<div id="' + file.id + '">' + file.name + ' (' + plupload.formatSize(file.size) + ') <b></b></div>'; }); }, UploadProgress: function(up, file) { document.getElementById(file.id).getElementsByTagName('b')[0].innerHTML = '<span>' + file.percent + "%</span>"; }, Error: function(up, err) { document.getElementById('console').appendChild(document.createTextNode("\nError #" + err.code + ": " + err.message)); }, FileUploaded: function(up, file, info) { // Called when file has finished uploading $("body").append($(info.response)) }, UploadComplete: function(up, file) { } } }); uploader.init(); })index.jade修改成下面的样子，主要是添加上传点击的元素，添加了两个按钮而已（不要嫌弃它确实是比较丑--）
extends layout block content h1= title p Wele to #{title} #filelist #container a#pickfiles select files a#uploadfiles upload files这里我们要用到的外部模块是Felix Geisendörfer开发的node-formidable模块。它对解析上传的文件数据做了很好的抽象。 其实说白了，处理文件上传“就是”处理POST数据 —— 但是，麻烦的是在具体的处理细节，所以，这里采用现成的方案更合适点。
安装formidable模块。
npm install formidable修改routes/index.js
var express = require('express'); var router = express.Router(); var fs = require('fs'); var formidable = require("formidable"); /* GET home page. */ router.get('/', function(req, res) { res.render('index', { title: '孟星魂' }); }); router.post('/', function(req, res) { var form = new formidable.IningForm(); form.uploadDir = "./public/upload/temp/"; //改变临时目录 form.parse(req, function(error, fields, files) { for (var key in files) { var file = files[key]; var fName = (new Date()).getTime(); switch (file.type) { case "image/jpeg": fName = fName + ".jpg"; break; case "image/png": fName = fName + ".png"; break; default: fName = fName + ".png"; break; } console.log(file, file.size); var uploadDir = "./public/upload/" + fName; fs.rename(file.path, uploadDir, function(err) { if (err) { res.write(err + "\n"); res.end(); } //res.write("upload image:<br/>"); res.write("<img src='/upload/" + fName + "' />"); res.end(); }) } }); });module.exports = router;
此时需要在public下手动新建文件夹upload以及下面的temp文件夹。
先把文件上传到临时文件夹，再通过fs重命名移动到指定的目录即可。
fs.rename即重命名，但是fs.rename不能夸磁盘移动文件，所以我们需要指定上传的临时目录要和最终目录在同一磁盘下。
res.write就是往前端返回的数据，这里我直接返回一个img标签，并添加上传文件的路径，前端只要把标签append到页面中就ok了。
完成前端图片上传功能！！
今天进行到这里，明天进行讲解node连接数据库的操作。