利用FormData上传本地文件-Toy模板网

这篇具有很好参考价值的文章主要介绍了利用FormData上传本地文件。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

前言

最近接了个小项目，有个用客户端本地文件的需求。

正常这种需求都是前台传文件，后台去解析。

但这次C++的老哥非让我给文件路径，说公司平台有解析文件的能力。

我说web不是桌面端，拿不到真实路径，他还不信😪

最后一顿‘掰头’，还是传文件

本来还是想用element-plus省事，但想到用公司平台做前后台通信也就放弃了

还是用FormData吧！

FormData

FormData 对象是ajax2.0新提出的接口，它将数据编译成键值对，以便用来发送数据。

使用：new一个FormData对象，然后调用它的append()方法来添加字段；

当然， FormData还有其他的方法，这里就不一一介绍了。
利用FormData上传本地文件

上传文件

首先，我们创建一个input框，用于上传文件并绑定change事件，然后通过change事件拿到文件。

利用FormData上传本地文件

然后，实例化一个FormData对象, 将文件通过append方法，添加到FormData对象。

最后，将添加好的FormData通过xhr发送到后台。

示例代码

    <input type="file" onchange="upload(event)">

    const upload = function (event) {
        let file = event.target.files[0];
        const formData = new FormData();
        formData.append('file', file);
        
        // xhr发送到后台
        // ...
    }