博客项目实战6 文件上传

  // 选择文件上传控件

    var file = document.querySelector('#file');

    var preview = document.querySelector('#preview');

    file.onchange = function() {

        //1 创建文件读取对象

        var reader = new FileReader();

        // 用户选择的文件列表

        // console.log(this.files[0]);

        // 2 读取文件

        reader.readAsDataURL(this.files[0]);

        // 3 监听 onload 事件

        reader.onload = function() {

            console.log(reader.result);

            //将文件读取的结果显示在页面中

            preview.src = "" + reader.result;

        }

 

// 引入模块 

const formidate = require('formidable');

const path = require('path');

const { Article } = require('../../model/acticle');

module.exports = (req, res) => {

    // 1. 创建表单解析对象

    const form = new formidate.IncomingForm();

    // 2. 配置上传文件的上传位置

    form.uploadDir = path.join(__dirname, '../', '../', 'public', 'uploads');

    // 3 保留上传文件的后缀

    form.keepExtensions = true;

    // 4 解析表单

    form.parse(req, async(err, fields, files) => {

        // 1 err 错误对象 如果表单解析是不 err 里面存储错误信息 如果解析成功 err 将会是 null

        // 2 fields 对象类型 保存普通表单数据

        // 3 files 对象类型 保存了和上传文件相关的数据

        // console.log(files.cover.path.split('public')[1]); 

        // res.send(files.cover.path.split('public')[1]);

        await Article.create({

            title: fields.title,

            author: fields.author,

            publishDate: fields.publishDate,

            cover: files.cover.path.split('public')[1],

            content: fields.content

        });

        // 添加成功  重定向到列表页

        res.redirect('/admin/article');

    })

}