最近要實現一個多圖片上傳的預覽功能，網上有很多例子大多不太完整，我就把他們的整合了下并且加了一些功能和界面，我們只需要調用一條指令就可以實現，但傳給后臺還需要額外的代碼，會在后面controller里介紹。不知道封裝的是否符合標準，還希望大家一起討論下,如果有時間封裝下Angular4的圖片上傳和預覽分享給大家。
圖片上傳的預覽，我們最主要解決的是拿到input的on-change事件，再是讀取圖片，讀取圖片我們需要用到FileReader。
我們先寫一個讀取圖片的服務，這是網上的一位大佬寫的，我就直接拿了過來
/** * 圖片上傳獲取返回的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, deferred, scope) { return function () { scope.$apply(function () { deferred.reject(reader.result); }); }; }; var getReader = function(deferred, scope) { var reader = new FileReader(); //fileReader reader.onload = onLoad(reader, deferred, scope); reader.onerror = onError(reader, deferred, 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 };}])我們現在有了圖片的讀取，我們再來搞定圖片的on-change事件
/** * 圖片上傳預覽 */app .directive('file', ['$parse', 'fileReader', function ($parse, fileReader) { return { restrict: 'A', link: function(scope, element, attrs, ngModel) { var model = $parse(attrs.file); var modelSetter = model.assign; console.log(modelSetter) element.bind('change', function(event){ scope.$apply(function(){ modelSetter(scope, element[0].files[0]); }); //附件預覽 scope.imgupload = (event.srcElement || event.target).files[0]; getFile(scope.imgupload, scope); //獲得預覽圖地址并且把file對象放入上傳合集內 function getFile (imgupload, scope) { if(!imgupload) { return; } fileReader.readAsDataUrl(imgupload, scope) .then(function(result) { scope.imgshows.push(result) var file = document.querySelector('input[type=file]').files[0]; scope.uploadimgs.push(file)//這里是放著傳給后臺的數據file，下面controller的時候會有 }); }; }); } }; }]) 這里就是提供上傳圖片預覽的樣式，還有預覽圖刪除的功能
app .directive('uploadimg', function () { return { restrict: 'E', scope: { uploadimgs: "=" }, templateUrl: './js/directives/uploadimg/uploadimg.html', link: function(scope, element, attrs) { scope.imgshows = []//預覽圖片合集放的是src scope.uploadimg_del = function(index,imgs) { scope.imgshows.splice(index,1); scope.uploadimgs.splice(index,1); } } }}) <style type="text/css">.fileupload { width: 100px; height: 100px; border: 1px dotted #ccc; display: inline-block;}.fileupload-icon { font-size:32px; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);}</style><div> <div class="fileupload pos-rlt" ng-repeat="imageSrc in imgshows"> <img ng-src="{{imageSrc}}" style="max-width:200px;max-height:300px;margin:0 auto; display:block;" class="pos-rlt" width=100%; height=100%;/> <i class="icon ion-close-circled" style="position: absolute; top:5px; right: 5px" ng-click="uploadimg_del($index, imgshows)"></i> </div> <div class="fileupload pos-rlt clear" > <i class="icon ion-plus-round fileupload-icon"></i> <input type="file" style="display:inline-block; width: 100%; height: 100%; opacity:0" name="upload_img" file="upload_img" placeholder="選擇圖片" accept="image/png,image/gif,image/jpeg,image/jpg" > </div></div></label>最后的調用也很簡單
我們只需要在2個地方加代碼一個是在界面，一個是在Controller里
<uploadimg uploadimgs="uploadimgs"></uploadimg>
這個是在Controller里的，這是用來傳給后臺的數據集合，我們需要傳給后臺的是file對象
$scope.uploadimgs = []//上傳圖片合集放的是file對象
如何傳給后臺呢，直接附上代碼，其實不難
$scope.save = function() { var Fromdata = { 'name': $scope.form.name, 'desc': $scope.form.descr, 'price': $scope.form.price, 'status': $scope.form.status?1:0, } var uploadData = createFromData(Fromdata) for(var i = 0; i < $scope.uploadimgs.length; i++) { uploadData.append('upload_imgs', $scope.uploadimgs[i]) } $http({ method:'POST', url:"后臺地址", data: fd, headers: {'Content-Type':undefined}, transformRequest: angular.identity }) .success( function(response){ //上傳成功的操作 }); } //構造FormData//@param 是一個對象function createFromData(Fromdata) { var fd = new FormData(); for(key in Fromdata) { fd.append(key,Fromdata[key]); } return fd}最后給大家看下預覽圖
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
