十天上手Node+KOA(3)

发布任务~
一、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实现上传图片

客户端：

    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');
});