发布任务~
一、path模块
二、url模块
三、formidable包
一、path模块
path 模块提供用于处理文件路径和目录路径的实用工具
const paths = require('path');
let dir = 'D:/node/';
// 将碎片化路径拼接在一起，规范化生成的路径
path.join(dir, './public'); // D:\node\public
let extStr = '/index.html';
// path的扩展名
path.extname(extStr); // .html
二、url模块
用于处理与解析 URL
实例化URL
new URL(input)
input: 要解析的输入URL
let url = '/';
let appUrl = new URL('http://localhost:3002' + decodeURIComponent(req.url));
// URL {
// href: 'http://localhost:3002/',
// origin: 'http://localhost:3002',
// protocol: 'http:',
// username: '',
// password: '',
// host: 'localhost:3002',
// hostname: 'localhost',
// port: '3002',
// pathname: '/',
// search: '',
// searchParams: URLSearchParams {},
// 获取表示URL查询参数的URLSearchParams对象
// 通过get(key) 可获取value
// hash: ''
// }
实战： 使用formidable实现上传图片
客户端：
<body>
<input type="file" id="file">
<div id="img-containers"></div>
</body>
let file = document.getElementById('file');
let imgContainer = document.getElementById('img-containers');
file.addEventListener('change', uploadFile);
function uploadFile() {
// 实例化formData
let form = new FormData();
// 实例化读取文件
let fileReader = new FileReader();
fileReader.onload = function () {
let img = document.createElement('img');
img.src = fileReader.result;
// 显示图片
img.onload = function () {
imgContainer.appendChild(img);
}
}
fileReader.readAsDataURL(this.files[0]);
// 存入单张图片至formData中
form.set('file', this.files[0]);
// 可存入多张 (Array)
// form.append('file', this.files[0]);
filePost('/upload', form, (data) => {
console.log(data);
})
}
// post 传输文件（formData格式）
function filePost(url, form, callback) {
let xhr = new XMLHttpRequest();
xhr.open('POST', url);
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
callback(xhr.responseText);
}
}
xhr.send(form);
}
服务端
引入基本依赖
const http = require('http');
const fs = require('fs');
const paths = require('path');
let dir = 'D:/node/'
console.log(paths.join(dir, './public'));
const { URL } = require('url');
// 上传文件的第三方包
const formidable = require('formidable');
// 以流的方式读取文件，当访问/作为首页返回
const readStreamIndex = fs.createReadStream('./public/html/index.html');
搭建服务及创建路由接口
http.createServer((req, res) => {
// 将url转为url对象
let appUrl = new URL('http://localhost:3002' + decodeURIComponent(req.url));
// 返回首页
if (req.method === 'GET' && appUrl.pathname === '/') {
readStreamIndex.pipe(res);
}
if (req.method === 'POST' && appUrl.pathname === '/upload') {
// 创建一个新的的正在进入的表单
var form = new formidable.IncomingForm();
// 指定文件保存路径
form.uploadDir = './public/uploads';
// 解析文件
form.parse(req, function (err, fields, files) {
if (err) res.end(JSON.stringify(err));
// 修改文件名
var oldPath = paths.join(__dirname, files['file'].path);
// 以时间戳命名 以免 文件重名
var comment = new Date() * 1 + '';
var newPath = paths.join(__dirname, './public/uploads', comment + files['file'].name);
// 保存在用户信息里面
fields.imgSrc = newPath;
// 文件重命名
fs.rename(oldPath, newPath, function (err) {
res.writeHead(200, { 'Content-type': 'text/plain; charset=UTF-8' });
var result = err ? '上传失败' : '上传成功';
if (err) res.end(result);
// 存储图片信息
fs.writeFile(__dirname + '/imgInfor/' + comment + '.json', JSON.stringify(fields), function (err) {
res.writeHead(200, { 'Content-type': 'text/plain; charset=UTF-8' });
var result = err ? '上传失败' : '上传成功';
res.end(result);
});
});
});
}
}).listen(3002, (err) => {
if (err) throw err;
console.log('listen 3002');
});
网友评论