利用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

对象）转成文件后，再发到后台。

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

至少我用到了，你呢？

结语

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

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