axios를 사용하여 이미지 업로드 진행 상황 표시 기능 구현

Axios는 Promise를 기반으로 한 HTTP 라이브러리로, 브라우저와 node.js에서 사용할 수 있습니다.

기능

브라우저에서 XMLHttpRequests를 생성

node.js에서 HTTP 요청을 생성

Promise API 지원

요청과 응답을 차단

요청 데이터와 응답 데이터 변환

요청 취소

JSON 데이터 자동 변환

클라이언트가 XSRF 방어를 지원합니다

이제 axios를 사용하여 이미지 업로드 진행 상황 표시 기능을 소개합니다. 구체적인 내용은 다음과 같습니다:

　최근 수행한 프로젝트에서, 휴대폰 페이지에 최대로 업로드해야 할 이미지는 수십장입니다. 사진에 압축 처리를 했지만, 결국 큰 파일이 되었습니다. 네트워크 카드가 아니라면, 업로드 시간이 매우 나쁩니다. 지속적으로 로딩 중이라면, 사용자는 자신이 얼마나 업로드했는지 모릅니다. 업로드 진행 상황을 더 직관적으로 표시하기 위해, 진행 바와 업로드 퍼센트를 표시하는 것이 가장 좋습니다;

　　프로젝트는 vuejs 프레임워크를 사용합니다.-ui는 UI 프레임워크로, vue 공식 추천 axios(매우 강력합니다)를 요청합니다. axios 공식에서 원시 사용 방법을 설명했습니다;업로드 처리 진행 이벤트이곳을 참조하세요(여기에는 중국어의 axios 공식 소개가 있습니다):

 onUploadProgress: function (progressEvent) {
  // 원시 진행 이벤트 처리
 },

　　vuejs를 사용하기 때문에, 인터페이스 데이터 요청을 쉽게 관리하기 위해 일관된 관리가 필요합니다. 각 컴포넌트에 배치하면 향후 유지보수와 관리가 불편합니다. reqwest.js 파일에서 uploadPhoto 메서드를 정의했습니다. 이 메서드는 세 가지 매개변수를 가지고 있으며, 이는 업로드할 이미지를 위한 필요한 추가 매개변수입니다. 첫 번째 콜백은 업로드 진행 상황을 포함한 데이터를 가져오며, 두 번째 콜백은 업로드 성공/실패를 포함한 백엔드가 반환하는 데이터를 가져와서 페이지의 다음 단계 작업을 수행합니다.

 uploadPhoto(payload,callback1,callback2){
    axios({
      url:BASE_URL + '/handler/material/upload',
      method:'post',
      onUploadProgress:function(progressEvent){ //업로드 진행 상황을 얻는 원시 이벤트
        if(progressEvent.lengthComputable){
          //lengthComputable 속성은 총 작업량과 완료된 작업량이 측정될 수 있는지를 나타냅니다;
          //lengthComputable이 false라면 progressEvent.total과 progressEvent.loaded를 가져올 수 없습니다;
          callback1(progressEvent);
        }
      },
      data:payload
    }).then(res =>{
      callback2(res.data);
    }).then(error =>{
      console.log(error)
    }
  }

mint 사용-ui 컴포넌트의 Progress 컴포넌트에서 data 메서드에서 이 컴포넌트의 변수 precent를 정의합니다. 이 변수는 number 타입입니다. 정의할 때 주의하세요;　

<mt-progress :value="precent" :bar"-height="10">
   <div slot="end">{{Math.ceil(precent)}}%</div>
  </mt-progress>

reqwest.js 파일을 import하여 uploadPhoto 메서드를 가져오고, 업로드 진행 상황을 가져와서 $nextTick 속성을 사용하여 실시간으로 페이지를 업데이트합니다.

const _this = this;
API.uploadPhoto(fd,(res) =>{
 let loaded = res.loaded;
   total = res.total;
   _this.$nextTick(() =>{
    _this.precent = (loaded/total) * 100;
   }
},(res) =>{
  if(res.code === '200'){
    MessageBox.alert('이미지 업로드 성공').then(action => {
     console.log('ok');
    });
  }
}

　　위의 방법에 따라 이미지 업로드 진행 상황과 비율을 기본적으로 구현했으며, 남은 것은 UI입니다. 개인화된 디자인을 통해 완벽한 요구를 만족시키는 것을 실현하십시오...

결론

위에서 설명한 것은 axios를 사용하여 이미지 업로드 진행 상황 표시 기능을 구현하는 방법입니다. 많은 도움이 되길 바랍니다. 어떤 질문이 있으시면, 댓글을 남겨 주시면, 편집자가 즉시 답변을 드리겠습니다. 또한,呐喊 강의 사이트에 대한 지원에 감사드립니다!

선언: 이 문서의 내용은 인터넷에서 수집되었으며, 저작권자는 모두에게 있습니다. 내용은 인터넷 사용자가 자발적으로 기여하고 자체적으로 업로드한 것이며, 이 웹사이트는 소유권을 가지고 있지 않으며, 인공 편집 처리를 하지 않았으며, 관련 법적 책임을 부담하지 않습니다. 저작권 침해가 의심되는 내용이 있으시면, 이메일을 notice#w로 발송하여 주시기 바랍니다.3codebox.com에 (이메일 작성 시, #을 @으로 변경하십시오) 신고를 해 주시고, 관련 증거를 제공해 주시면, 사이트가 즉시 저작권 침해 내용을 삭제할 것입니다.

기본 가이드

당신이 좋아할 것 같은