Angular angular-file-upload文件上傳的示例代碼

更新時(shí)間：2018年08月23日 09:27:10 作者：張喜碩

這篇文章主要介紹了Angular angular-file-upload文件上傳的示例代碼，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

問(wèn)題描述

附件上傳

檢定結(jié)果以附件形式上傳。

這里先不考慮api。

實(shí)現(xiàn)的任務(wù)就是，點(diǎn)擊選擇文件，選擇之后可以清楚掉該文件。

插件介紹

用到了項(xiàng)目映入過(guò)的一個(gè)插件，angular-file-upload。

angular-file-upload AP：https://github.com/nervgh/angular-file-upload

進(jìn)入正題，我們?nèi)绾伟惭b，還是老樣子安利波npm

npm install angular-file-upload

插件很簡(jiǎn)單，就是一個(gè)指令，我們?cè)谒峁┙o我們的指令中聲明一個(gè)uploader對(duì)象，這個(gè)對(duì)象表示在不同的時(shí)間下要執(zhí)行什么操作，另一種觀察者模式。

功能實(shí)現(xiàn)

使用指令

官網(wǎng)給出了該指令的很多種用法，這里選擇最簡(jiǎn)單的，Single，單文件上傳。

<input type="file" nv-file-select uploader="uploader"/>

一個(gè)file類(lèi)型的input，使用nv-file-select指令，傳給該指令一個(gè)uploader對(duì)象作為參數(shù)。

很簡(jiǎn)單的邏輯，新建一個(gè)FileUploader的對(duì)象，然后重寫(xiě)它的onAfterAddingFile方法，就是在文件添加完成之后，也就是點(diǎn)擊選擇文件，選中文件，點(diǎn)擊完成之后執(zhí)行的一個(gè)方法。

此方法中我們直接對(duì)文件進(jìn)行上傳操作。

// 新建文件上傳實(shí)例
self.uploader = new FileUploader();

// 重寫(xiě)文件添加后的方法
self.uploader.onAfterAddingFile = function(fileItem) {
  // 打印日志
  if (config.debug) { console.info('onAfterAddingFile', fileItem); }
  // 上傳文件
  self.upload(fileItem);
};

// 傳給視圖
$scope.uploader = self.uploader;

如果將文件上傳封裝成指令，以上代碼應(yīng)該方法指令的controller方法中執(zhí)行?。?！

關(guān)于指令中的compile、controller、link的執(zhí)行詳解，請(qǐng)參考正確地使用 Angular Directive 中的 compile，controller 與 link。

原因分析

可能是nv-file-select指令在實(shí)現(xiàn)時(shí)在link函數(shù)中進(jìn)行各種事件的綁定，綁定時(shí)就需要我們的uploader對(duì)象。

而如果我們將其放在了link函數(shù)里，該指令的link函數(shù)是晚于nv-file-select的link函數(shù)執(zhí)行的，所以無(wú)效。

upload

// 上傳文件
self.upload = function(data) {
  // 上傳文件
  AttachmentService.uploadFile(data._file)
    .then(function success(response) {
        // 將上傳成功的附件綁定再ngModel中
        $scope.ngModel = response.data;
        // 顯示上傳按鈕
        self.showClear();
      }, function error() {
        // 提示用戶上傳失敗
        sweetAlert.swal({
          title: "對(duì)不起",
          text: "上傳的附件不能大于1M，請(qǐng)確認(rèn)附件是否大于1M"
        });
      });
};

清空

用戶上傳錯(cuò)了文件怎么辦呢？添加一個(gè)清空按鈕，如果上傳文件之后就顯示。

// 清空選中文件
self.clear = function() {
  self.deleteFile(scope.ngModel.id);
};

// 刪除附件
self.deleteFile = function(id) {
  AttachmentService.deleteFile(id, function success() {
    // 將附件賦為空對(duì)象
    scope.ngModel = undefined;
    // 隱藏清空按鈕
    self.hideClear();
  });
};

scope.clear = self.clear;

但是這里會(huì)有一個(gè)問(wèn)題，這里僅僅是刪除了服務(wù)器上的附件，而文件的選中效果還是在的，這里還是顯示選中的文件名的。

解決方案就是用一個(gè)form把它套起來(lái)，將button的類(lèi)型設(shè)置為reset，點(diǎn)擊按鈕時(shí)，就會(huì)清空input中的內(nèi)容了。

<form name="formInner" novalidate>
  <fieldset>
    <label class="col-sm-4 control-label">附件</label>
    <div class="col-sm-4">
      <input type="file" nv-file-select uploader="uploader"/>
    </div>
    <div class="col-md-4">
      <button type="reset" ng-if="params.showClearOrNot" ng-click="clear()" class="btn btn-xs btn-default">清除</button>
    </div>
  </fieldset>
</form>

<form>
  <input ng-model="xxx" />
  <yunzhi-upload-file ng-model="work.apply.attachment"></yunzhi-upload-file>
</form>

設(shè)置為reset之后就會(huì)出現(xiàn)新的問(wèn)題，因?yàn)槭窃谝粋€(gè)form表單里套的這個(gè)指令，所以reset，將其他的也都清空了。

ng-form

拿ng-form解決了問(wèn)題。

這是ng-form指令的官方解釋：

HTML does not allow nesting of form elements. It is useful to nest forms, for example if the validity of a sub-group of controls needs to be determined.

HTML不允許嵌套form元素，ng-form被用來(lái)嵌套form，如果一個(gè)子的form組需要被驗(yàn)證。

但是ng-form并沒(méi)有實(shí)現(xiàn)form的功能，ng-submit就不能使用，想想這樣設(shè)計(jì)也是合理的，如果ng-form也能submit，嵌套form，一個(gè)submit的button，提交誰(shuí)？

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: