yan blog
0%

发表于 本文字数： 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}/`);
})

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

备份数据库

mysqldump -hhostname -uusername -ppassword databasename > backupfile.sql