Angularjs實(shí)現(xiàn)多圖片上傳預(yù)覽功能

2019-11-19 13:27:57

字體：大中小

供稿：網(wǎng)友

最近要實(shí)現(xiàn)一個(gè)多圖片上傳的預(yù)覽功能，網(wǎng)上有很多例子大多不太完整，我就把他們的整合了下并且加了一些功能和界面，我們只需要調(diào)用一條指令就可以實(shí)現(xiàn)，但傳給后臺(tái)還需要額外的代碼，會(huì)在后面controller里介紹。不知道封裝的是否符合標(biāo)準(zhǔn)，還希望大家一起討論下,如果有時(shí)間封裝下Angular4的圖片上傳和預(yù)覽分享給大家。

圖片上傳的預(yù)覽，我們最主要解決的是拿到input的on-change事件，再是讀取圖片，讀取圖片我們需要用到FileReader。

我們先寫(xiě)一個(gè)讀取圖片的服務(wù)，這是網(wǎng)上的一位大佬寫(xiě)的，我就直接拿了過(guò)來(lái)

/** * 圖片上傳獲取返回的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       };}])

我們現(xiàn)在有了圖片的讀取，我們?cè)賮?lái)搞定圖片的on-change事件

/** * 圖片上傳預(yù)覽 */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]);            });            //附件預(yù)覽                        scope.imgupload = (event.srcElement || event.target).files[0];               getFile(scope.imgupload, scope);              //獲得預(yù)覽圖地址并且把file對(duì)象放入上傳合集內(nèi)               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)//這里是放著傳給后臺(tái)的數(shù)據(jù)file，下面controller的時(shí)候會(huì)有                        });               };          });        }      };    }])

這里就是提供上傳圖片預(yù)覽的樣式，還有預(yù)覽圖刪除的功能

app .directive('uploadimg', function () {       return {        restrict: 'E',         scope: {          uploadimgs: "="        },        templateUrl: './js/directives/uploadimg/uploadimg.html',              link: function(scope, element, attrs) {            scope.imgshows = []//預(yù)覽圖片合集放的是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>

最后的調(diào)用也很簡(jiǎn)單
我們只需要在2個(gè)地方加代碼一個(gè)是在界面，一個(gè)是在Controller里

<uploadimg uploadimgs="uploadimgs"></uploadimg>

這個(gè)是在Controller里的，這是用來(lái)傳給后臺(tái)的數(shù)據(jù)集合，我們需要傳給后臺(tái)的是file對(duì)象

$scope.uploadimgs = []//上傳圖片合集放的是file對(duì)象

如何傳給后臺(tái)呢，直接附上代碼，其實(shí)不難

$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:"后臺(tái)地址",     data: fd,     headers: {'Content-Type':undefined},     transformRequest: angular.identity     })     .success( function(response){     //上傳成功的操作     });   }  //構(gòu)造FormData//@param 是一個(gè)對(duì)象function createFromData(Fromdata) {   var fd = new FormData();   for(key in Fromdata) {     fd.append(key,Fromdata[key]);    }   return fd}

最后給大家看下預(yù)覽圖