formdata的一些使用方法

最新推荐文章于 2023-12-16 10:15:00 发布

无名尔

最新推荐文章于 2023-12-16 10:15:00 发布

阅读量229

点赞数 1

文章标签： html5 css html

本文链接：https://blog.csdn.net/weixin_54242901/article/details/120142210

版权

//引入formidable第三方模块
const formidable = require('formidable');
//创建客户端路由
app.post('/formData', (req, res) => {
        //创建formidable表单解析对象
        const form = new formidable.IncomingForm();
        //解析客户端传递过来的FormData对象
        form.parse(req, (err, fields, files) => {
            res.send(fields);
        })
    })

上面是服务器端

下面客户端

//（1）.FormData.get('key')方法可以获取表单对象属性值

//(2) FormData.set('属性','属性值'),设置表单对象属性值

//(3) formData.delete('key'),删除表单对象属性中的值

//(4) formData.append('key','value'),设置表单对象的值，与set方法不同的是，它保留两个值

2，formdata实现二进制文件上传功能

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./bootstrap/css/bootstrap.min.css">
    <style>
        .container {
            padding-top: 60px;
        }
        
        .padding {
            padding: 5px 0 20px 0;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="form-group">
            <label for="">请选择文件</label>
            <input type="file" id="file">
        </div>
    </div>
    <script>
        var file = document.getElementById('file');
        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.send(formData);
            //监听服务器端响应给客户端的数据
            xhr.onload = function() {
                //如果服务器端返回的http状态码为200,说明请求是成功的
                if (xhr.status == 200) {
                    console.log(xhr.responseText);
                }
            }

        }
    </script>
</body>

</html>

服务器端

app.post('/upload', (req, res) => {
        //创建formidable表单解析对象
        const form = new formidable.IncomingForm();
        //设置客户端上传文件的存储路径
        form.uploadDir = path.join(__dirname, 'public', 'uploads');
        //保留上传文件的后缀名字
        form.keepExtensions = true;
        //解析客户端传递过来的FormData对象
        form.parse(req, (err, fields, files) => {
            res.send('ok');
        })
    })

字符串分割取前去后

字符串.spilt(（‘以此字符来分'）,[1:取后半部分])