文件上传，cookie和session，ejs和express脚手架的使用

    <form action="/doupload" method="post" enctype="multipart/form-data">
        <div>帐号：<input type="text" name="usr"></div>
        <div>密码：<input type="password" name="pwd"></div>
        <div>密码：<input type="password" name="repwd"></div>
        <div>头像：<input type="file" name="pic"></div>
        <div><input type="submit" value="注册"></div>
    </form>

后端

使用第三方formidable包来处理含有文件上传的表单，代码如下：

注意：在当前项目的根目录安装formidable包： npm i formidable

const experss = require('express');
const path = require('path');
const fs = require('fs');
//引用
const formidable = require('formidable');
var svgCaptcha = require('svg-captcha');

const app = experss();
app.listen(3000, () => {
    console.log(`web服务器工作在3000端口`);
});



//文件上传界面：
app.get('/uploads', (req, res) => {

    res.sendFile(path.join(__dirname, 'users.html'));
});

//处理含有文件上传的表单
app.post('/doupload', (req, res) => {
    let filePath = path.join(__dirname, 'uploads');
    //判断目录或文件是否存在：
    if (!fs.existsSync(filePath)) { //目录不存在时
        fs.mkdirSync(filePath); //创建目录
    }

    //uploadDir:设置文件上传成功后的存放位置
    const form = formidable({ multiples: true, uploadDir: filePath });
    form.parse(req, (err, fields, files) => {
        console.log(err, fields, files, 111);

            res.send('OK')
        }
    });


});

服务器处理完毕响应结果

保留原文件名：

生成及其他文件名：

1）年月日时分秒 + 8位随机数

2）使用第三方模块uuid(uuid包用来产生唯一字符串，这个唯一字符串可以作为改名之后的文件名),使用方法：uuid - npm。

const experss = require('express');
const path = require('path');
const fs = require('fs');
const formidable = require('formidable');
var svgCaptcha = require('svg-captcha');

const app = experss();
app.listen(3000, () => {
    console.log(`web服务器工作在3000端口`);
});



//文件上传界面：
app.get('/uploads', (req, res) => {

    res.sendFile(path.join(__dirname, 'users.html'));
});

//处理含有文件上传的表单
app.post('/doupload', (req, res) => {


    let filePath = path.join(__dirname, 'uploads');
    //判断目录或文件是否存在：
    if (!fs.existsSync(filePath)) { //目录不存在时
        fs.mkdirSync(filePath); //创建目录
    }

    //uploadDir:设置文件上传成功后的存放位置
    const form = formidable({ multiples: true, uploadDir: filePath });
    // console.log(form, 333);

    form.parse(req, (err, fields, files) => {
        // console.log(err, fields, files, 111);

        if (err) { //表单处理失败
            res.send('表单处理失败');
        } else { //表单处理成功 

            //获取用户选择的要上传文件的文件名:
            let ufilename = files.pic.originalFilename;
            //获取用户选择的要上传文件的文件扩展名：
            let extNames = path.extname(ufilename);
            // console.log(extNames, 666);

            //生成新文件名:  完整文件名=文件名.扩展名
            let fullname = `${files.pic.newFilename}${extNames}`

            //将上传成功后生成的临时文件名改为正式文件名
            fs.renameSync(files.pic.filepath, `${filePath}/${fullname}`);

            res.send('OK')
        }
    });


});

使用jquery的ajax方法实现文件上传时要注意的事项：

data: new FormData($("#upfile")[0]), //文件上传的表单

processData: false, //设置jquery不处理表单数据

contentType: false, //设置jquery不处理表单编码

在使用ajax实现文件上传需要验证用户身份时，用户身份数据(JWT数据)可以通过表单的隐藏域或ajax的请求头将用户身份数据发送到服务端。

   <div class="my_icon">
                    <form id="upfile">
                        <span>头像</span>
                        <a href="javascript:;">
                        <!-- type="hidden":隐藏域 -->
                        <input type="hidden" name="uid" id="uid">
                            <img src="../img/login/user.png" class="myIcon" />
                            <div class="change">
                                更换头像
                                <input name="pic" accept=".gif,.png,.jpg,.jpeg" type="file" class="btn_file" onchange="uploadHeaImg()" />
                            </div>
                        </a>
                    </form>
                </div>

    <script>
        function uploadHeaImg()

最低0.47元/天解锁文章

玖商

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
文件上传，cookie和session，ejs和express脚手架的使用

目录项目开发流程文件上传前端后端服务器处理完毕响应结果cookie使用为什么要使用cookie、session？介绍cookie特点cookie实现原理cookie-parser下载引入并开启cookie功能设置cookie获取cookiesession使用介绍session特点session与cookie的联系：实现原理cookie-session下载引入并开启session功能设置Session数据访问.
复制链接

扫一扫