前言

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

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

但这次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 对象）转成文件后
 

 

 

 

 

 

 

 ，再发到后台 

 
 

 
 

 
 

 
 

 
 

 
 

 
 

 。

虽然
 

 

 

 

 

 

 

 
，这么说有点蠢               ，一般没有人会这么干 

 
 

 
 

 
 

 
 

 
 

 
 

 
 

 ，但是在上传一些工程文件还是有应用场景的















。

至少我用到了















，你呢？

结语

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

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