携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第17天，点击查看活动详情

在工作中，文件上传功能是经常遇到的问题，但是我们基本上都是用组件去解决文件上传的问题，很少有人会去了解和通过原生的方式去手动实现一下文件上传，今天来通过原生的方式进行实现一下完整的操作

页面结构

首先我们写一个input文件选择框，用于选择文件，还可以给input添加上multiple属性开启多选，在写一个button按钮用于操控文件上传，上面绑定一了个FileUpload方法，里面是文件上传的操作

<input type="file" id="file" multiple/>
<button onclick="FileUpload()">上传文件</button>

文件上传

我们通过js获取id元素的方法获取到文件上传框的DOM元素，在根据DOM元素下的files属性获取到上传的文件信息列表，里面每一项都是一个file对象，包含了文件名字，文件大下，文件类型等信息，然后创建一个formData构造的函数实例，便于我们操作或存储file文件向后端传输,由于我们获取到的file文件列表是一个伪数组，所以我们这里使用Array.form方法将他转化为真正的数组，在使用数组上的map方法进行循环使用formData实例上的append方法往里面追加数据，追加后的数据可以通过formData实例上的get方法进行读取文件信息，这里我们无法通过正常的console.log方法读取到formData实例上的数据，因为formData构造函数是一种特殊的对象类型，无法进行序列化数据，所以我们通过console.log打印的直接就是formData原型，将数据追加进该实例之后，就可以通过后端的接口向后端进行传输

    function FileUpload() {
            const files = document.getElementById('file').files;
            const formData = new FormData();
        
           Array.from(files).map(R=>{
                console.log(R);
                formData.append('photos', files);

            })
            //读取
           // formData.get("file");
            //上传文件代码省略
        }

在发送请求的时候我们需要注意，我们需要将请求头的content-type属性设置为multipart/form-data，设置成该属性之后我们往后端传递就会是一个文件流，后端进行处理的话也比较方便

坚持努力，无惧未来！