FormData对象实现二进制文件和图片上传

2023-11-25 11:42:10

HTML代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="/assets/bootstrap/dist/css/bootstrap.min.css">
    <style type="text/css">
        .container {
            padding-top: 60px;
        }
        
        .padding {
            padding: 5px 0 20px 0;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="form-group">
            <label>请选择文件</label>
            <input type="file" id="file">
        </div>
        <div class="padding" id="box">
            <!-- <img src="" class="img-rounded img-responsive" alt=""> -->
        </div>
        <div class="progress">
            <div class="progress-bar" style="width: 0%;" id="bar">0%</div>
        </div>
    </div>
    <script type="text/javascript">
        // 获取文件选择控件
        var file = document.getElementById('file');
        // 获取进度条元素
        var bar = document.getElementById('bar');
        // 获取图片容器
        var box = document.getElementById('box');
        // 为文件选择控件添加onchange事件
        // 在用户选择文件时触发
        file.onchange = function() {
            // 创建空的formData表单对象
            var formData = new FormData();
            // 将用户选择的文件追加到formData表单对象中
            formData.append('attrName', this.files[0]);
            // 创建ajax对象
            var xhr = new XMLHttpRequest();
            // 对ajax对象进行配置
            xhr.open('post', 'http://localhost:3000/upload');
            // 在文件上传过程中持续触发
            xhr.upload.onprogress = function(ev) {
                // ev.loaded 文件已经上传了多少
                // ev.total 上传文件的总大小
                var result = (ev.loaded / ev.total) * 100 + '%';
                // 设置进度条的宽度
                bar.style.width = result;
                // 将百分比显示在进度条中
                bar.innerHTML = result;
            };
            // 发送请求
            xhr.send(formData);
            // 监听服务器端响应给客户端的数据
            xhr.onload = function() {
                // 如果服务器端返回的http状态码为200
                // 说明请求是成功的
                if (xhr.status == 200) {
                    // 将服务器端返回的数据显示在控制台中
                    var result = JSON.parse(xhr.responseText);
                    // 动态创建img表单
                    var img = document.createElement('img');
                    // 给图片标签设置src属性
                    img.src = result.path;
                    // 当图片加载完成以后
                    img.onload = function() {
                        // 将图片显示在页面中
                        box.appendChild(img);
                    }
                }
            }
        }
    </script>
</body>

</html>

服务器端代码

// 引入express框架
const express = require('express');
// 路径处理模块
const path = require('path');
const formidable = require('formidable');
const bodyParser = require('body-parser');
// 创建web服务器
const app = express();

// 静态资源访问服务功能
app.use(express.static(path.join(__dirname, 'public')));


// 实现文件上传的路由
app.post('/upload', (req, res) => {
    // // 创建formidable表单解析对象
    // const form = new formidable.IncomingForm();
    // // 设置客户端上传文件的存储路径
    // form.uploadDir = path.join(__dirname, 'public', 'uploads');
    // // 保留上传文件的后缀名字
    // form.keepExtensions = true;
    // 报错

    const form = new formidable.IncomingForm({
        encoding: 'utf-8',
        uploadDir: path.join(__dirname, 'public', 'uploads'),
        keepExtensions: true
    });
    // 解析客户端传递过来的FormData对象
    form.parse(req, (err, fields, files) => {
        // console.log(files.attrName.filepath);
        // 将客户端传递过来的文件地址响应到客户端
        res.send({
            path: files.attrName.filepath.split('public')[1]
        });
        // res.send('ok');
    });
});

// 监听端口
app.listen(3000);
// 控制台提示输出
console.log('服务器启动成功');

码农公寓

相关文章