前后端分离文件上传系列:在web网页读以字符串形式上传文件

Hello every one ~我又回来啦，忙碌了一个星期，大家有没有想我呀～本周上海下了很大的雪呢，据说是10年未见的大雪～嗯嗯，小乐子我这么年轻，10年前我还那么小，怎么可能会记得呢

我还很年轻呢

我们今天要继续上次的话题，和大家分享如何在前后端物理分离的情况下，将文件上传到服务器。

之前我们给大家介绍了如何在iOS和安卓上对本地文件进行操作，并转换为字符串进行上传，下面给出传送门：

前后端分离文件上传系列：在安卓系统中将文件转换为字符串并上传

前后端分离文件上传系列：在iOS中将文件转换为字符串并上传

今天我们要介绍的是如何在web网页端将本地文件进行处理，并且转换成Base64字符串，然后上传到服务器的方法。

为了方便各位理解，小乐子全程使用了原生javascript来做处理，没有引入任何的第三方类库。

首先，既然我们最终是将本地文件转换成字符串来进行上传的，那么我们就需要有一个变量，用来记录最终被上传到服务器的文件内容字符串：

第二步，在网页上，我们通常都是使用file表单控件来选取本地文件的，如下所示：

注意在上图中，onchange事件里调用了一个方法：

getStringFromFile()

接下来我们就需要来实现这个方法，将用户所选择的文件转换为Base64的字符串：

注意，上图中的“e”是浏览器事件。有了它，我们就可以根据浏览器事件来获取用户所选择到的文件：

得到了文件之后，我们需要用到“FileReader”类的实例对象来进行处理：

由于文件大小不一，js加载文件可能需要一定的时间，因此我们需要调用FileReader的onload方法，来确保文件被正确加载完成，这样才能将整个文件转换为字符串：

在onload的内部，我们用以下代码来获取文件的字符串内容：

注意，上图中的“this.result”是FileReader实例在完成加载之后所读取到的文件字符串内容。需要注意的是，这里所得到的文件内容是带有头部信息的，这个头部信息可能是这样的：

data:image/jpeg;base64,****

上面代码片段中的“****”代表真正的文件字符串内容，而前面部分就是头部信息了。根据实际情况的需要，我们可以将选择将头部信息去除，仅保留文件正文内容：

到此为止，我们就将文件转换为字符串了。将上面的步骤中的代码片段整合在一起看的话，就是这个样子：

得到了字符串形式的文件内容，要怎么通过ajax形式上传到服务器，就不用我教了吧～～