vue 는 axios 를 사용 하여 파일 업로드 진 도 를 실시 간 으로 업데이트 합 니 다.
axios 는 Promise 를 기반 으로 브 라 우 저 와 nodejs 에 사용 되 는 HTTP 클 라 이언 트 로 그 자체 가 다음 과 같은 특징 을 가지 고 있 습 니 다.
$ npm install axios
//
$ cnpm install axios
// cdn：
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>Vue.use()사용 할 수 없 기 때문에 요청 을 보 낼 구성 요소 마다 즉시 도입 할 수 있 습 니 다.이 문 제 를 해결 하기 위해 서 우 리 는 axios 를 도입 한 후에 원형 체인 을 수정 하여 더욱 편리 하 게 사용 할 수 있 습 니 다.
//main.js
import axios from 'axios'
Vue.prototype.$http = axios
methods: {
postData () {
this.$http({
method: 'post',
url: '/user',
data: {
name: 'xiaoming',
info: '12'
}
})
}vue 는 axios 를 사용 하여 파일 업로드 진행 을 실시 간 으로 업데이트 합 니 다.
XHR 2 급 은 progress 사건 을 추 가 했 습 니 다.저 희 는 이에 따라 브 라 우 저 에서 새로운 데 이 터 를 받 는 동안 실시 간 데이터 진도 바 를 추가 하여 상호작용 을 더욱 우호 적 으로 할 수 있 습 니 다.
vue 템 플 릿
<div class="progress" @click="upload"
:style="{backgroundImage:'linear-gradient(to right,#C0C7CB 0%,#C0C7CB '+progress+',#E1E6E9 '+progress+',#E1E6E9 100%)'}">
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(' ')
}
})총결산
이상 은 이 글 의 전체 내용 입 니 다.본 논문 의 내용 이 여러분 의 학습 이나 업무 에 어느 정도 참고 학습 가치 가 있 기 를 바 랍 니 다.궁금 한 점 이 있 으 시 면 댓 글 을 남 겨 주 셔 서 저희 에 대한 지지 에 감 사 드 립 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Fastapi websocket 및 vue 3(Composition API)1부: FastAPI virtualenv 만들기(선택 사항) FastAPI 및 필요한 모든 것을 다음과 같이 설치하십시오. 생성main.py 파일 및 실행 - 브라우저에서 이 링크 열기http://127.0.0.1:...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
