最近要实现一个多图片上传的预览功能，网上有很多例子大多不太完整，我就把他们的整合了下并且加了一些功能和界面，我们只需要调用一条指令就可以实现，但传给后台还需要额外的代码，会在后面controller里介绍。不知道封装的是否符合标准，还希望大家一起讨论下,如果有时间封装下Angular4的图片上传和预览分享给大家。
图片上传的预览，我们最主要解决的是拿到input的on-change事件，再是读取图片，读取图片我们需要用到FileReader。
我们先写一个读取图片的服务，这是网上的一位大佬写的，我就直接拿了过来
<div class="jb51code">
<pre class="brush:js;">
/**
-
图片上传获取返回的url
*/
app .factory('fileReader',["$q","$log",function($q,$log){
var onLoad = function(reader,deferred,scope) {
return function () {
scope.$apply(function () {
deferred.resolve(reader.result);
});
};
};var onError = function (reader,scope) { return function () { scope.$apply(function () { deferred.reject(reader.result); }); }; }; var getReader = function(deferred,scope) { var reader = new FileReader(); //fileReader reader.onload = onLoad(reader,scope); reader.onerror = onError(reader,scope); return reader; }; var readAsDataURL = function (file,scope) { var deferred = $q.defer(); var reader = getReader(deferred,scope); reader.readAsDataURL(file); return deferred.promise; }; return { readAsDataUrl: readAsDataURL};
}])
