Axios를 사용하여 진행률 표시줄 기능이 있는 사진을 업로드하는 방법

Axios는 브라우저와 node.js에서 사용할 수 있는 Promise 기반 HTTP 라이브러리입니다. 이 글에서는 주로 이미지 업로드 진행률 표시줄을 구현하기 위한 axios의 사용을 소개합니다. 필요한 친구는 이를 참고할 수 있습니다.

Axios는 브라우저와 node.js에서 사용할 수 있는 Promise 기반 HTTP 라이브러리입니다. featurespeature

브라우저에서 xmlhttprequests를 생성합니다.

클라이언트는 XSRF에 대한 방어를 지원합니다

다음은 axios를 사용하여 업로드 이미지 진행률 표시줄 기능을 구현하는 방법을 소개합니다. 구체적인 내용은 다음과 같습니다.

최근 프로젝트에서 최대 업로드 수는 다음과 같습니다. 모바일 페이지의 경우 10장의 사진이 압축되었지만 결국에는 여전히 매우 큽니다. 네트워크 카드를 사용하면 업로드 시간이 매우 느리므로 사용자는 알 수 없습니다. 업로드한 양을 더 직관적으로 표시하려면 진행률 표시줄과 업로드 비율을 표시하는 것이 가장 좋습니다.

프로젝트에서는 UI 프레임워크로 mint-ui를 사용합니다. vue가 공식적으로 추천하는 axios(정말 강력함); axios 공식에서 기본 업로드 처리 진행 이벤트 사용을 소개했습니다(자세한 내용은 여기를 참조하세요. 중국어로 된 axios 공식 소개는 다음과 같습니다):

 onUploadProgress: function (progressEvent) {
  // 对原生进度事件的处理
 },

vuejs를 사용하기 때문에, 관리의 편의를 위해 인터페이스에서 데이터 요청에 대한 통합 관리가 필요합니다. 각 컴포넌트에 배치하면 향후 유지관리에 불편이 따르게 되는데, reqwest.js 파일에는 uploadPhoto 메소드가 정의되어 있는데, 이 메소드에는 3개의 매개변수, 즉 2개의 콜백 함수가 있습니다. . 이미지의 필수 매개변수는 업로드 진행 상황에 포함된 데이터를 가져오는 것이고, 두 번째 콜백은 업로드가 성공하거나 실패한 경우 백그라운드에서 반환되는 데이터를 가져오는 것입니다. 페이지 작업.

 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 컴포넌트를 사용하고, 데이터 메소드의 컴포넌트에 "precent" 변수를 정의할 때 주의하세요.

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

reqwest 파일을 가져오세요. Node.js를 사용하여 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이며, 이는 완벽한 요구 사항을 충족하기 위해 자신의 개성에 따라 맞춤 설정할 수 있습니다...위는 제가 한 것입니다. 모든 사람을 위해 편집되었습니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.

관련 기사:

ionic3에서 무작위 레이아웃 폭포 흐름을 구현하는 방법

React 프로젝트에서 Redux를 사용하는 방법(자세한 튜토리얼)

JavaScript에서 자동 숫자 증가를 구현하는 방법

Swiper 사용 페이지네이터 사용 방법

Vue 구성 요소 통신에서 버스 사용 방법

Angular에서 민감한 텍스트 프롬프트를 구현하는 방법

Angular에서 숨겨진 디스플레이를 구현하는 방법

위 내용은 Axios를 사용하여 진행률 표시줄 기능이 있는 사진을 업로드하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!