Angular angular-file-uproad 파일 에 올 라 온 예제 코드

문제 설명
첨부 파일 업로드
검정 결 과 는 첨부 파일 로 업로드 된다.

여 기 는 생각 하지 않 습 니 다api.
이 루어 진 임 무 는 파일 선택 을 누 르 고 선택 하면 이 파일 을 알 수 있 습 니 다.
플러그 인 소개
항목 이 들 어 온 플러그 인 을 사 용 했 습 니 다.angular-file-upload
angular-file-upload AP： https://github.com/nervgh/angular-file-upload
본론 으로 들 어가 면,우 리 는 어떻게 설치 하 는 지,여전히 그대로 입 니 다.

npm install angular-file-upload

플러그 인 은 매우 간단 합 니 다.바로 하나의 명령 입 니 다.우 리 는 그것 이 우리 에 게 제공 하 는 명령 에서 하나의uploader대상 을 설명 합 니 다.이 대상 은 서로 다른 시간 에 어떤 조작 을 해 야 하 는 지,다른 관찰자 모드 를 표시 합 니 다.
기능 실현
사용 명령
홈 페이지 에 서 는 이 명령 의 여러 가지 용법 을 제시 했다.여기 서 가장 간단 한 것Single을 선택 하고 단일 파일 로 업로드 했다.

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

하나의file유형의input명령 을 사용 하여nv-file-select명령 을 전달 하고 이 명령 의 대상uploader을 매개 변수 로 한다.
간단 한 논리 입 니 다.FileUploader대상 을 새로 만 든 다음 에 다시 쓰 는onAfterAddingFile방법 은 파일 추가 가 완 료 된 후에 파일 을 선택 하고 파일 을 선택 하 며 완 료 를 클릭 한 후에 실행 하 는 방법 입 니 다.
이 방법 에서 우 리 는 직접 파일 을 업로드 합 니 다.

//         
self.uploader = new FileUploader();

//           
self.uploader.onAfterAddingFile = function(fileItem) {
  //     
  if (config.debug) { console.info('onAfterAddingFile', fileItem); }
  //     
  self.upload(fileItem);
};

//     
$scope.uploader = self.uploader;

파일 을 명령 으로 업로드 하면 상기 코드 는 방법 명령controller방법 에서 실 행 됩 니 다!!
명령 중의compile,controller,link의 집행 에 대한 상세 한 설명 은 참고 하 시기 바 랍 니 다Angular Directive 의 copile,contrller,link 를 정확하게 사용 합 니 다..
원인 분석nv-file-select명령 이 실 현 될 때link함수 에서 각종 사건 의 바 인 딩 을 할 수 있 습 니 다.바 인 딩 할 때 우리 의uploader대상 이 필요 합 니 다.
만약 에 우리 가 이 를link함수 에 넣 으 면 이 명령 의link함 수 는nv-file-select함수 보다 늦게 실 행 된link함수 이기 때문에 무효 입 니 다.
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: "   ",
          text: "         1M，         1M"
        });
      });
};

텅 비다
사용자 가 파일 을 잘못 올 리 면 어떻게 합 니까?파일 을 업로드 하면 삭제 단 추 를 추가 합 니 다.

//       
self.clear = function() {
  self.deleteFile(scope.ngModel.id);
};

//     
self.deleteFile = function(id) {
  AttachmentService.deleteFile(id, function success() {
    //         
    scope.ngModel = undefined;
    //       
    self.hideClear();
  });
};

scope.clear = self.clear;

하지만 서버 에 있 는 첨부 파일 만 삭 제 했 을 뿐 파일 의 선택 효 과 는 그대로 있 습 니 다.선택 한 파일 이름 을 표시 합 니 다.

해결 방안 은 하나의form로 그것 을 씌 워button의 유형 을reset로 설정 하고 단 추 를 누 르 면input의 내용 을 비 우 는 것 이다.

<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>

reset로 설정 하면 새로운 문제 가 발생 합 니 다.하나의form폼 에 설 치 된 이 명령 이기 때문에reset다른 것 도 비 웠 습 니 다.
ng-form
문 제 를 해결 하 다.
이것 은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.ng-form내장HTML요 소 를 허용 하지 않 습 니 다.form내장ng-form은 하나의 키form그룹 이 검증 되 어야 합 니 다.
그러나form실현ng-form의 기능 이 없 으 면form사용 할 수 없다.생각해 보면 이런 디자인 도 합 리 적 이다.만약ng-submit도ng-form,끼 워 넣 기submit,하나form의submit를 누구 에 게 제출 할 수 있 을 까?
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.