FormData表单的使用,和下面的方法,以及使用nodejs接收信息的配置

css部分

* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        .w {
            width: 600px;
            margin: 0 auto;
        }

        .title {
            margin-top: 30px;
            margin-bottom: 10px;
        }

        .file {
            margin-bottom: 12px;
        }

        .onload {
            height: 20px;
            border-radius: 10px;
            /* background-color: orange;*/
            border: 1px solid red;
        }

        .ing {
            width: 0%;
            height: 100%;
            background-color: orange;
            border-radius: 10px;
            overflow: hidden;
            line-height: 18px;
        }

        .ing span {
            float: right;
            margin-right: 5px;
        }

html

<h1 class="title w">文件上传案例</h1>
    <div class="file w">
        点击上传文件<input type="file" name="" id="file" value="选择文件">
    </div>
    <div class="onload w">
        <div class="ing"><span id="loadmsg">60%</span></div>
    </div>

客户端js部分

function $(id) {
            return document.querySelector(id);
        };
        $("#file").onchange = function () {
            //创建空表单对象,FormData里面是空的时候,就是创建的空表单
            const form = new FormData();
            //给表单对象添加内容   files[0]是因为上传是可以同时选择多个文件的,所以用下面的集合files[0],表示上传的第一个文件,一般情况下都是上传一个文件
            form.append("newData", this.files[0]);
            const xhr = new XMLHttpRequest();
            xhr.open("post", "/file");
            //在send之前,可以使用xhr下面的对象upload对象,使用ongropress事件监听上传进度
            //可以在事件中打印console.log(e),查看所有的属性,loaded表示文件大小,total表示已经上传
            xhr.upload.onprogress = function (e) {
                let ing = (e.loaded / e.total * 100).toFixed(0) + '%';
                $(".ing").style.width = ing;
                $("#loadmsg").innerHTML = ing;
            }
            xhr.send(form);
            xhr.onload = function () {
                console.log(xhr.responseText);
            }
        }

服务器端js

//引用解析二进制文件的模块
const formidable = require("formidable");
//还有个path拼接路径的没有写进来

//下面是服务端的路由
app.post("/file", (req, res) => {
    // 创建解析对象
    let form = new formidable.IncomingForm();
    // 使用path模块设置文件存储的具体位置
    form.uploadDir = path.join(__dirname, "public", "uploads");
    //是否保留后缀名.默认是false
    form.keepExtensions = true;
    // 使用parse解析数据
    //req是请求对象,err是错误对象,fields是普通上传数据对象,比如说上传的名字=谁谁谁,files是二进制文件对象
    form.parse(req, function (err, fields, files) {
        res.send(fields)
    });

});

 

关于FormData对象使用

　　这是一个使用post上传二进制文件的对象,可以使用

let form = new FormData();
的方式获取对象,不填就是创建一个空的对象,填的话是获取现有的表单对象(给form表单添加一个id,并且把获取到的表单放在对象中)
这个对象下有四个方法

form.get("这里填写表单中的name属性的值"),返回值是用户填写的值
form.set("这里填name值" , "这里填写需要设置的值"),例如表单中,用户没有填写日期,默认为当前日期,就可以用这个设置
form.delete("填写要删除的name的值"),比如说表单中有username = '张三',删除之后就没有这个值了
form.append("这里是要添加的属性","这里是属性的值")

注意事项
　　1. set方法对于没有的值,会添加并且设置值,已经有的值会进行覆盖
　　2. set能设置已经有的值,append只能添加没有的值
　　3. 对于没有的值,使用set和append没有区别
　　4. 对于已经存在的值,建议使用set,使用append会把相同的内容上传两次;例如表单中本来就有age=13;用set改成14,只会上传age=14,一次;;使用append会上传age=13一次,age=14一次