图片上传知识点梳理

在平常项目开发中，图片上传是一个十分常见的场景。而如今的各类UI框架都提供了本身的上传组件，网上第三方的上传组件也多如牛毛。可能你早已习惯了直接使用这些现成的组件，然而对于其具体的实现，却并未深刻解析。本文将经过简单的代码，为你解析图片上传的各个知识点。

样式自定义

既然是上传，确定须要使用到<input type="file">标签了。然而，默认的input到标签样式不只单一，且在各个浏览器下的表现也不相同，因此一般须要对input进行样式自定义。但<input>标签对于样式的修改并不十分友好。解决方法不少，最经常使用的是将<input type="file">标签隐藏，而后经过一个<label>标签进行关联，而后直接修改<label>标签的样式来实现。代码以下：

<input type="file" id="uploadImg">
    <label for="uploadImg">点击上传</label>
复制代码

图片校验

在上传以前，通常会对文件进行各类校验，例如文件类型，大小，格式，尺寸等。

其中文件类型，可经过设置<input>标签的accept来指定文件类型。但accept属性并不能彻底禁止用户上传指定类型以外的文件。故能够经过上传文件的各个属性进行校验拦截。校验前，咱们须要经过change事件的事件对象来获取到上传的文件:

event.target.files
复制代码

能够获取到上传文件列表。列表中对象包含以下信息：

{
        lastModified: 1524153515000
        lastModifiedDate: Thu Apr 19 2018 23:58:35 GMT+0800 (中国标准时间) {}
        name: "589adfbfe821c.jpg"
        size: 1357444
        type: "image/jpeg"
        webkitRelativePath: ""
    }
复制代码

从该对象中，咱们能够获取到文件大小，文件类型，文件名等信息，从而能够在上传以前对这些信息进行校验，从而拦截掉不合法的文件。

然而，从file对象中，咱们并不能获取图片的尺寸信息。而在咱们的业务中，不少场景都须要限制上传图片的尺寸为某一个固定值，或者是某一个比例。以减小后期显示时的适配问题。要实现对上传图片尺寸对校验，咱们须要使用到FileReader和Image。

FileReader对象容许Web应用程序异步读取存储在用户计算机上的文件。

Image()函数将会建立一个新的HTMLImageElement实例。它的功能等价于document.createElement('img')。

这里，咱们须要用到fileReader的readAsDataURL()方法来读取上传文件信息，经过onload处理事件来获取读取到的文件信息。以下：

const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = e => {
        console.log(e.target.result)
    }
复制代码

代码中，file为咱们以前获取到的文件列表files中的文件对象。e.target.result为读取到到文件内容。

以后经过new Image()函数建立一个新的HTMLImageElement实例，并将该实例的src赋值为fileReader读取到到文件内容。便可获得一个该文件的HTMLImageElement实例，经过该实例，咱们即可以读取到该图片的尺寸信息。具体代码以下：

const image = new Image();
    image.src = e.target.result;
    image.onload = () => {
        console.log(image.width, image.height);
    }
复制代码

图片上传预览

在以前的开发中，图片上传显示一般会采用先将文件上传，预览图片直接展现上传到服务器中到图片来实现，但这样没法达到上传前预览该图片的目的，且会形成许多垃圾图片的上传。

经过前面对于获取图片尺寸研究。相信你能很快想到一种更加优雅的图片预览方案，既然咱们已经获取到了该文件的HTMLImageElement实例，那么咱们直接将该实例append到页面的容器Dom中不久行了。或者直接将获取到的文件设置到已存在的image标签的src属性中。图片上传预览就是这么简单。

图片上传与上传进度展现

图片的上传，咱们能够直接经过form标签搭配表单的submit()方法来实现图片的上传。然而，这样咱们就没法在上传前进行上传文件的校验与拦截。同时须要用户主动触发提交操做。要想让咱们以前作的上传前的拦截工做不白作，咱们须要去在合适的时候，主动触发文件的上传操做。

这里，须要使用到FormData对象，来将入参对象数据转为表单数据。

FormData对象用以将数据编译成键值对，以便用XMLHttpRequest来发送数据。其主要用于发送表单数据，但亦可用于发送带键数据(keyed data)，而独立于表单使用。若是表单enctype属性设为multipart/form-data ，则会使用表单的submit()方法来发送数据，从而，发送数据具备一样形式。

首先咱们建立一个formData对象，而后经过append() 方法来添加字段。以下：

const formData = new FormData();
    formData.append("file", file);
复制代码

注意，formData虽然为一个对象，但经过console.log却没法打印出其具体的值，只会获得FormData {}。

接下来建立一个XMLHttpRequest对象,用来发送ajax请求。而且经过该XMLHttpRequest对象的upload.onprogress方法，能够实时获取到上传信息，并进一步获取到上传的进度。具体代码以下：

const client = new XMLHttpRequest()
    client.open("POST", uploadUrl)
    client.upload.onprogress = function(e) {
      if (e.lengthComputable) {
        let total = e.total;
        let loaded = e.loaded;
        let percentage = parseFloat(loaded / total).toFixed(2);
      }
    }
    client.send(formData)
复制代码

上面代码中，uploadUrl为上传的URL。经过upload.onprogress的事件对象，能够获取到当前进度已上传的文件大小以及完整文件大小，经过这两个大小参数，能够很容易计算出已上传文件的比例，以后是显示上传进度条、仍是展现进度数据，就能够随意操做了。

拖拽上传

除了传统的点击选择上传文件外，拖拽文件上传也是一个十分常见的场景。要使用拖拽上传，就须要使用H5的拖放方法drop 和 drag方法。除了这两个主要的方法外，还有拖放的不一样阶段触发的多个方法，经常使用的拖拽方法以下：

• ondragstart 事件：当拖拽元素开始被拖拽的时候触发的事件（做用对象为被拖曳元素）
• ondrag：在元素拖动期间不停的触发该事件，与touchmove事件相似。（做用对象为被拖曳元素）
• ondragend 事件：当拖拽完成后触发的事件（做用对象为被拖曳元素）
• ondragenter 事件：当拖曳元素进入目标元素的时候触发的事件（做用对象为目标元素）
• ondragover 事件：拖拽元素在目标元素上移动的时候触发的事件（做用对象为目标元素）
• ondragleave 事件：拖拽元素在目标元素上移动的时候触发的事件（做用对象为目标元素）
• ondrop 事件：被拖拽的元素在目标元素上同时鼠标放开触发的事件（做用对象为目标元素）

拖拽的各个事件相似与touch事件的各个阶段。然而须要注意的是，拖拽的各个事件，有着本身的做用对象，做用对象分为‘被拖拽元素’和‘目标元素’。被拖拽元素 为拖拽的那个Dom元素，主要使用在页面内Dom拖拽移动的场景。目标元素为接收被拖拽元素的元素区域。当被拖拽元素进入到该区域，便会触发目标对象的一系列事件。

在图片拖拽上传这个业务场景中，被拖拽元素为页面外部的图片文件，故此处仅用到目标元素的各个事件。咱们能够经过这些事件来修改目标区域样式等。核心的两个事件为ondragover和ondrop事件。可能你以为我只须要在松开鼠标时获取拖拽的文件就行，所以只须要使用ondrop事件就好了？可是，因为浏览器的默认行为，ondrop事件并不会被触发。所以，须要使用e.preventDefault(); 来阻止掉 ondropover的浏览器默认事件，从而保证ondrop事件的触发。经过ondrop事件的事件对象，咱们能够获取到跟event.target.files相同的文件列表，获取方法为event.dataTransfer.files;然而，当你这么写完以后，进行拖拽以后，你会发现浏览器自动跳转到了该图片的预览页。这也是因为浏览器的默认行为致使，所以也须要使用e.preventDefault();来阻止掉浏览器的默认行为。这样，即可以进行后续的文件校验操做来。 具体实现代码以下：

<label for="uploadImg"
        onDragOver={e => {
            e.preventDefault();
        }}
        onDrop={e => {
            if (e.dataTransfer) {
                e.preventDefault();
                const file = e.dataTransfer.files[0];
                ...
            } 
        }}
    </label>
复制代码

至此，图片上传的经常使用知识点以梳理完毕，欢迎补充。