node.js

const Koa = require('koa');
const KoaRouter = require('koa-router');
const KoaBody = require('koa-body');
const cors = require('koa-cors')
const KoaStaticCache = require('koa-static-cache');
\\koa-static是静态文件服务器，使得客户端可以访问我们的图片(img)呀，网页(html)呀。koa-static-cache是静态文件缓存，是在客户端缓存文件，一般我们用来缓存js和css，以减少服务器的负担
const fs = require('fs');



const app = new Koa();
app.use(KoaStaticCache({
    prefix: '/avatar',
    dir: './attachments',//文件存储地址
    gzip: true,
    dynamic: true
}));
const router = new KoaRouter()

router.get('/', async (ctx, next)  =>{
    ctx.body = fs.readFileSync("index.html").toString()
})

router.post('/uploads', KoaBody({
    multipart: true,
    formidable: {
        uploadDir: './files',
        keepExtensions: true,
        maxFileSize: 209731402000
    }
}), async ctx => {
    const { path } = ctx.request.files.attachment;
    const lastIndexOf = path.replace(/\/|\\/g, '/').lastIndexOf('/');
    const filename = path.substring(lastIndexOf + 1);
    ctx.body = `/avatar/${filename}`;
});
app.use(cors())
app.use(router.routes());
app.listen(8080,()=>{
    console.log("服务器已启动 http://localhost:8080");
})

前端渲染

<h1>前端渲染</h1> 

    <input style="display: none;" type="file" name="attachment" id="attachment" multiple />
    <a href="javascript:;">上传附件</a>

    <div class="processBox" style="display: none;" style="width: 500px;height: 50px; position: relative; border: 1px solid #333;">
        <div class="processText" style="width: 500px;height: 50px; position: relative; text-align: center; font-size: 30px; line-height: 50px; position: absolute; z-index: 2;">0%</div>
        <div class="processBg" style="width: 0;height: 50px; position: relative; position: absolute; background-color: rgb(176, 128, 221);"></div>
    </div>

 let attachmentElement = document.querySelector('#attachment');
    let aElement = document.querySelector('a');
    let processBoxElement = document.querySelector('.processBox');
    let processTextElement = document.querySelector('.processText');
    let processBgElement = document.querySelector('.processBg');
    aElement.onclick = function() {
        attachmentElement.click();
    }
    attachmentElement.onchange = function() {
        processBoxElement.style.display = 'block'
        let xhr = new XMLHttpRequest();
        xhr.open('post', 'http://localhost:8080/uploads', true);
        xhr.onload = function() {
            console.log(xhr.responseText);
        }
        xhr.upload.onprogress = function(e) {
            let v = e.loaded / e.total;
            processTextElement.innerHTML = `${(v * 100).toFixed(2)}%`;
            processBgElement.style.width = `${500 * v}px`;
            if (v === 1) {
                setTimeout(()=>{
                processBoxElement.style.display = 'none'
                },1000)
            }
        }
        let fd = new FormData();
        console.log('attachmentElement.files', attachmentElement.files);
        fd.append('attachment', attachmentElement.files[0]);
        xhr.send(fd);
    }

node上传文件

node.js

前端渲染