yan blog
0%

发表于 更新于 本文字数： 742 阅读时长 ≈ 1 分钟

安装MongoDB服务

这里下载的时MongoDB 4 Windows社区版本，4之后的版本跟之前的有很大的不同，不需要自行指定数据库和日志目录了，这里安装过程只修改了安装目录，从默认的c盘自定义为d盘，其他均为默认选项，一并安装了compass，这里大多人都不推荐安装compass，说是会卡住，这里安装确实看起来像是卡住了，但就如安装信息说的这里可能需要 a few minutes，事实上这里安装进度不变保持了10分钟左右就安装好了，所以不用太担心，只是网络原因，假死而已

当然为了方便连接 MongoDB 实例，记得要将MongoDB安装目录下的bin目录添加到系统变量，这样我们就可以直接在shell 里直接输入 mongo 即可连接到MongoDB服务

常用命令

mongo

连接到本地的 MongoDB 实例，使用默认服务端口 27017

如果修改了本地 MongoDB 实例默认的服务端口，连接时我们也可以通过 --port 参数指定端口

例如

mongo --port 28015

show dbs

查看所有的数据库

db

查看当前数据库

use DATABASE_NAME

切换数据库（不论存在与否）

db.DATABASE_NAME.insert()

向 DATABASE_NAME 数据库插入数据

例如

db.test.insert({"description": "这是一条测试数据"})

注： 该命令不需要切换数据库

db.dropDatabase()

删除当前数据库

db.createCollection(name[,options])

在当前数据库创建集合 COLLECTION_NAME

db.COLLECTION_NAME.drop()

在当前数据库删除集合 COLLECTION_NAME

发表于 本文字数： 1.4k 阅读时长 ≈ 1 分钟

Demo

文件上传预览

代码

HTML

<form action="">
    <fieldset>
        <legend>上传视频文件</legend>
        <input type="file" accept="video/*">
        <h3>视频预览</h3>
        <video id="video" src="" controls></video>
    </fieldset>
    <fieldset>
        <legend>上传图片文件</legend>
        <input type="file" accept="image/*">
        <h3>图片预览</h3>
        <img id="img" src="" alt="">
    </fieldset>
</form>

CSS

video,
img {
    width: 300px;
}

JS

let form = document.querySelector('form')
    let videoEl = document.getElementById('video')
    let imgEl = document.getElementById('img')
    form.addEventListener('change', event => {
        if(event.target.type === 'file') {
            let file = event.target.files[0]
            if(event.target.accept.indexOf('video') >= 0) {
                videoEl.src = getObjectURL(file)
            }else if(event.target.accept.indexOf('image') >= 0) {
                imgEl.src = getObjectURL(file)
            }
        }
    })
    let getObjectURL = file => {
        let url = ''
        if (window.createObjectURL != undefined) { 
            // basic
            url = window.createObjectURL(file);
        } else if (window.URL != undefined) { 
            // mozilla(firefox)
            url = window.URL.createObjectURL(file);
        } else if (window.webkitURL != undefined) { 
            // webkit or chrome
            url = window.webkitURL.createObjectURL(file);
        }
        return url
    }

发表于 更新于 本文字数： 1.3k 阅读时长 ≈ 1 分钟

创建项目目录

mkdir uploadFile
cd uploadFile

初始化项目

git init
npm init

安装依赖

npm install koa koa-router koa-body koa-static

项目主程序 app.js

const Koa = require('koa');
const koaBody = require('koa-body');
const Router = require('koa-router');
const static = require('koa-static');
const cors = require('koa2-cors')
const fs = require('fs');
const path = require('path');

const hostname = '127.0.0.1'
const port = 3000

const app = new Koa()
const router = new Router()

app.use(cors())
app.use(static('.'));

router
    .get('/', (ctx, next) => {
        ctx.body = 'hello world!'
    })
    .post('/api/upload', koaBody({
        multipart: true,
        formidable: {
        }
    }), (ctx, next) => {
        let file = ctx.request.files.file
        let fileType = file.name.split('.').pop()
        let fileName = `${Date.now()}.${fileType}`
        let fileReader = fs.createReadStream(file.path)
        let writeStream = fs.createWriteStream(path.join(__dirname, 'upload', `${fileName}`))

        fileReader.pipe(writeStream)
        ctx.body = {
            code: 0,
            message: '上传成功',
            url: `http://${hostname}:${port}/upload/${fileName}`
        }
    })

app
    .use(router.routes())
    .use(router.allowedMethods())

app.listen(port, hostname, () => {
    console.log(`Server running at http://${hostname}:${port}/`);
})