axios를 사용하여 vue에 파일 업로드

최근에 Axios를 배워서 프로젝트에 사용했기 때문에 이번 글에서는 Axios를 사용하여 Vue에서 파일 업로드 진행 상황의 실시간 업데이트를 구현하는 방법에 대한 관련 정보를 주로 소개합니다. 액시오스, 모두가 그 방법을 이해할 수 있도록 공부하고, 필요한 친구들은 아래에서 함께 공부해 보세요.

axios 소개

axios는 브라우저와 nodejs를 위한 Promise 기반 HTTP 클라이언트로, 자체적으로 다음과 같은 특징을 가지고 있습니다:

• 브라우저에서 XMLHttpRequest 만들기

• node.js에서 http 요청 만들기

• Promise API 지원

• 요청 및 응답 차단

• 요청 및 응답 데이터 변환

• 요청 취소

• JSON 데이터 자동 변환

• CSRF /XSRF 방지 지원 종료

도입 방법 :

$ npm install axios
//使用淘宝源
$ cnpm install axios
//或者使用cdn：
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

다른 플러그인 설치시 main.js에서 직접 도입하고 Vue.use()를 이용해서 등록하면 되지만 axios는 Vue 플러그인이 아니기 때문에 사용할 수 없습니다Vue.use(). 따라서 요청을 보내야 하는 각 구성 요소에만 즉시 도입할 수 있습니다.

이 문제를 해결하기 위해 Axios를 도입한 후 프로토타입 체인을 보다 사용하기 편리하도록 수정했습니다.

//main.js

import axios from 'axios'
Vue.prototype.$http = axios

main.js에 이 두 줄의 코드를 추가한 후 구성 요소의 메서드에서 직접 $http 명령을 사용할 수 있습니다.

methods: {
postData () {
this.$http({
method: 'post',
url: '/user',
data: {
name: 'xiaoming',
info: '12'
}
})
}

더 많은 기본 지식을 보려면 다음 문서를 참조하세요. / /www.jb51.net/article/110324.htm

vue는 axios를 사용하여 파일 업로드 진행 상황의 실시간 업데이트를 구현합니다

XHR 레벨 2에 진행 이벤트가 추가되었습니다. 브라우저가 새로운 데이터를 수신합니다. 실시간 데이터 진행률 표시줄로 상호 작용이 더욱 친숙해집니다.

vue template

<p class="progress" @click="upload"
   :style="{backgroundImage:&#39;linear-gradient(to right,#C0C7CB 0%,#C0C7CB &#39;+progress+&#39;,#E1E6E9 &#39;+progress+&#39;,#E1E6E9 100%)&#39;}">

vue-js

 var form = new FormData()
 form.append('file', vm.$refs.upload.files[0])
 form.append('id', id)
 form.append('type', type)
 var config = {
  onUploadProgress: progressEvent => {
   var complete = (progressEvent.loaded / progressEvent.total * 100 | 0) + '%'
   this.progress = complete
  }
 }
 axios.post(`api/uploadFile`,
  form, config).then((res) => {
  if (res.data.status === 'success') {
   console.log('上传成功')
  }
 })

위 내용은 모두를 위해 편집한 내용입니다. 그렇게 되기를 바랍니다. 앞으로 모든 사람에게 도움이 됩니다.

관련 글:

Node.js에서 fs.renameSync를 호출하면 오류가 발생하나요?

VSCode에서 React Native 개발 환경을 구성하는 방법

vue에 Mint-UI를 설치하는 방법

AngularJS에서 수집 데이터 순회 표시를 구현하는 방법

위 내용은 axios를 사용하여 vue에 파일 업로드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!