图片上传显示进度条和预览图的前端实现之预览图篇

上一集我们说到了进度条的实现，之后就鸽了很久，终于到写这一篇的时候了，说到底一方面是自己太忙，第二方面是自己太懒了。

在图片未上传完成之前不可能拿到上传后返回的uri通过线上地址渲染，同时服务端图片预览虽然也可以实现，但比较麻烦，所以，这里的预览图，其实是拿到本地图片资源后，转换为uri，在浏览器端直接使用。

如图在上传进度条出现的时候，图片已经出现了，它从何而来呢？

我们可以使用URL.createObjectURl() 这个方法，这个方法通过传入一个File或者Blob对象，返回一个可以作为url的Blob， 我们在上传图片时，通过event.target.files拿到文件传入其中即可

The URL.createObjectURL() static method creates a DOMString containing a URL representing the object given in the parameter. The URL lifetime is tied to the document in the window on which it was created. The new object URL represents the specified File object or Blob object.
ob