node. java 上传文件_前端Node实现简易的文件上传下载

前端代码

文件名：register.html

Document

提交

点我下载

function submit () {

var img = document.getElementById('img');

var download = document.getElementById('download');

var file = document.getElementById('upfile');

//利用htmlAPI FormData

var formData = new FormData();

formData.append('img',file.files[0]);

//发送请求

var xhr;

if (window.XMLHttpRequest) {

xhr = new XMLHttpRequest();

} else {

xhr = ActiveXObject();

}

xhr.open('post','/imgData',true);

xhr.onreadystatechange = function () {

if (xhr.readyState == 4 && xhr.status == 200) {

var res = JSON.parse(xhr.responseText);

// 这一步，将上传成功之后，后端传回来一个地址，继续发送请求数据，后端只管读取数据返回就行，浏览器会自动识别

img.src = '/getImgData?path=' + res.path;

//下载，给a标签加上一个download属性就行，后端只管读取数据返回

download.href = '/getImgData?path=' + res.path;

}

}

xhr.send(formData);

}

NodeJS代码

下载所需要的模块

npm install express

npm install multer

var express = require('express');

var url = require('url');

var fs = require('fs');

var multer = require('multer'); //处理上传的文件模块

var app = new express();

var uploadSingle = multer({dest: './uploadFile/'}); //dest: 配置默认上传之后存储的文件夹

//这个返回的前端代码页面

app.get('/login',function (req,resp) {

var loginhtml = fs.readFileSync('./register.html');

resp.end(loginhtml);

})

//处理多张图片上传的时候，用uploadSingle.array('img),则request.file得到的是一个数组

//single里面的'img'要与前端上传时的name属性的值一致

app.post('/imgData',uploadSingle.single('img'),function (request,response) {

// 上传之后会自动保存到定义的文件夹下，一些相关信息在request.file当中

var path = request.file.path;

// ...存储到数据库等操作，把得到的存储地址返回给前端，用于后面前端好发送请求读取数据

})

app.get('/getImgData',function (request,response) {

//得到前端传递过来的要读取的文件的路径

var path = url.parse(request.url,true).query;

try {

var data = fs.readFileSync(path);

//返回读取到的数据

}catch(e) {

//读取发生错误。。

}

})

app.listen(8081,function () {

console.log('服务已启动');

})