前端上传头像并且使用中间件formidable处理

最新推荐文章于 2023-09-03 12:06:27 发布

pingting_

最新推荐文章于 2023-09-03 12:06:27 发布

阅读量412

点赞数 1

分类专栏： Node.js 文章标签：前端中间件 javascript node.js ajax

本文链接：https://blog.csdn.net/pingting_/article/details/122486163

版权

Node.js 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

前端上传头像并且使用中间件formidable处理

formidable中间件
- 相关配置
- 使用
上传图片
- 同步表单提交
- Ajax异步提交
demo代码

formidable中间件

使用

1.创建表单解析对象

const form = formidable({ 
        multiples: true ,
        keepExtensions: true
})

2.配置上传文件存放的位置

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

3.解析表单

err 错误对象，如果表单解析失败，存放错误信息，如果表单解析成功，为null
fields 对象类型，保存普通表单数据
files 对象类型，保存上传文件的相关数据

form.parse(req , (err, fields, files) => {
    if(err){
        console.log(err)
        res.send('上传失败')
    }
    else{
        console.log(err, fields, files)
        res.send('上传成功')
    }
})

上传图片

同步表单提交

form 标签一定要加 enctype="multipart/form-data"

<form action="http://127.0.0.1:5000/upload" method="post" enctype="multipart/form-data">
        <input type="text" name="nickname">
        <input type="text" name="email">
        <input type="file" name="files" value="指定文件">
        <br><br>
        <input type="submit" value="上传">
</form>

Ajax异步提交

为上传按钮添加change监听事件，获取上传文件列表的第一个文件
```
//  这里的this是被监听的DOM
var file = this.files[0];
```

实例化一个formData后将文件追加进去

let formDataObj = new FormData()
//				input的name 追加的文件内容
formDataObj.append('avatar' , file)

通过jquery封装的ajax方法发起请求

$.ajax({
    url: 'http://127.0.0.1:5000/upload',
    method: 'POST',
    data: formDataObj,
    processData: false,
    contentType: false,
}).then(function(res){
    console.log(res)
})

demo代码

前端页面代码

表单同步提交

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文件上传</title>
</head>
<body>
    <form action="http://127.0.0.1:5000/upload" method="post" enctype="multipart/form-data">
        <input type="text" name="nickname">
        <input type="text" name="email">
        <input type="file" name="files" value="指定文件">
        <br><br>
        <input type="submit" value="上传">
    </form>
</body>
</html>

ajax异步提交

部分代码来自17素材网上传头像的源码部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>formidable</title>
    <link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <style>
    .con4{
    width: 200px;
    height: auto;
    overflow: hidden;
    margin: 20px auto;
    color: #FFFFFF;
    }
    .con4 .btn{
        width: 90%;
        line-height: 20px;
        text-align: center;
        background-color: #3796f6;
        display: block;
        font-size: 13px;
        border-radius: 5px;
        cursor: pointer;
        margin-top: 10px;
    }
    .con4 .btn:hover{
        color: #fff;
        background-color: #408cd8;
    }
    .upload{
        float: left;
        position: relative;
    }
    .upload_pic{
        display: block;
        width: 100%;
        height: 40px;
        position: absolute;
        left: 0;
        top: 0;
        opacity: 0;
        border-radius: 5px;
        cursor: pointer;
    }
    #cvs{
        width: 90%;
        overflow: hidden;
        border-radius: 4px;
        background-color: #fafafa;
        border: 1px solid rgba(133,153,171,0.2);
    }
    </style>
</head>
<body>
    <div style="width: 400px; margin: 200px;">
        <form role="form" id="publish_blog" method="post" enctype="multipart/form-data" >
            <div class="form-group">
                <label for="name">名字</label>
                <input type="text" class="form-control" placeholder="请输入名称" name="name">
            </div>
            <div class="form-group">
                <label for="email">email</label>
                <input type="text" class="form-control"  placeholder="请输入email" name="email">
            </div>
            <div class="form-group">
                <label for="avatar">头像 <span style="font-size: 12px;color: #8599ab;font-weight: normal;">（建议选择正方形的图片哦...）</span></label>
                <div class="con4">
                    <canvas id="cvs" width="200" height="200"></canvas>
                    <span class="btn upload ">上传头像<input type="file" class="upload_pic" id="uploadAvatar" name="avatar" /></span>
                </div>
            </div>
            <button type="submit" class="btn btn-default">提交</button>
        </form>
    </div>
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
    let formDataObj = new FormData()
    //获取上传按钮
    var input1 = document.getElementById("uploadAvatar");
    function readFile(){ 
        var file = this.files[0];//获取上传文件列表中第一个文件
        formDataObj.append('avatar' , file)
        var reader = new FileReader(); //实例一个文件对象
        reader.readAsDataURL(file);    //把上传的文件转换成url
        reader.onload = function(e){ 
            $('#publish_blog').on('submit', function (e) {
                e.preventDefault()  //阻止默认事件
                var formData = $(this).serializeArray()  //获取表单数据
                for(let item of formData){
                    console.log(item)
                    formDataObj.append(item.name , item.value)
                }
                console.log(formDataObj)
                $.ajax({
                    url: 'http://127.0.0.1:5000/upload',
                    method: 'POST',
                    data: formDataObj,
                    processData: false,
                    contentType: false,
                }).then(function(res){
                    console.log(res)
                })
            })
            var image = new Image();
            image.src = e.target.result;
            image.onload = function(){ 
                var canvas = document.getElementById("cvs"); 
                var ctx = canvas.getContext("2d"); 
                ctx.clearRect(0, 0, canvas.width, canvas.height); 
                ctx.drawImage(image, 0, 0, 200, 200);
            };  
        }
    };
</script>
</body>
</html>

后台app.js代码

const express = require('express')
const bodyParser = require('body-parser')
const cors = require('cors')
const path = require('path')
// 引入
const formidable = require('formidable')

var app = express()

// 解决跨域
app.use(cors())

//配置解析 post
app.use(bodyParser.urlencoded({ extended: false }))
app.use(bodyParser.json())

app.post('/upload' , function(req , res){
    // 1. 创建表单解析对象
    const form = formidable({ 
        multiples: true ,
        keepExtensions: true
    })
    // 2. 配置上传文件存放的位置
    console.log(path.join( __dirname , 'public' , 'uploads' ))
    form.uploadDir = path.join( __dirname , 'public' , 'uploads' )
    // 3. 解析表单
    form.parse(req , (err, fields, files) => {
        if(err){
            console.log(err)
            res.send('上传失败')
        }
        else{
            console.log(err, fields, files)
            res.send('上传成功')
        }
    })
})

app.listen(5000 , function() {
    console.log('Running...')
})