這篇文章給大家介紹如何在Angular中使用angular-file-upload上傳文件，內(nèi)容非常詳細(xì)，感興趣的小伙伴們可以參考借鑒，希望對(duì)大家能有所幫助。

創(chuàng)新互聯(lián)建站是一家集網(wǎng)站建設(shè),納雍企業(yè)網(wǎng)站建設(shè),納雍品牌網(wǎng)站建設(shè),網(wǎng)站定制,納雍網(wǎng)站建設(shè)報(bào)價(jià),網(wǎng)絡(luò)營(yíng)銷,網(wǎng)絡(luò)優(yōu)化,納雍網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強(qiáng)企業(yè)競(jìng)爭(zhēng)力?？沙浞譂M足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時(shí)我們時(shí)刻保持專業(yè)、時(shí)尚、前沿，時(shí)刻以成就客戶成長(zhǎng)自我，堅(jiān)持不斷學(xué)習(xí)、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實(shí)用型網(wǎng)站。

附件上傳

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

這里先不考慮api。

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

插件介紹

用到了項(xiàng)目映入過的一個(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，單文件上傳。

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

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

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

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

// 重寫文件添加后的方法
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í)行的，所以無效。

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ù)器上的附件，而文件的選中效果還是在的，這里還是顯示選中的文件名的。

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

  

    附件