利用FormData上传本地文件

前言

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

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

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

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

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

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

还是用FormData吧！

FormData

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

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

当然， FormData还有其他的方法，这里就不一一介绍了。

上传文件

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

然后，实例化一个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发送到后台
        // ...
    }

拓展

在此基础之上，可以拓展一下，将数据（通过 Blob 对象，以及File 对象）转成文件后，再发到后台。

虽然，这么说有点蠢，一般没有人会这么干，但是在上传一些工程文件还是有应用场景的。

至少我用到了，你呢？

结语

本文到此结束，谢谢大家的观看！

如有问题，欢迎各位指正！