> 웹 프론트엔드 > JS 튜토리얼 > Vue 프로젝트에서 업로드 구성 요소를 사용하는 방법

Vue 프로젝트에서 업로드 구성 요소를 사용하는 방법

php中世界最好的语言
풀어 주다: 2018-04-12 17:40:47
원래의
1974명이 탐색했습니다.

이번에는 Vue 프로젝트에서 upload 컴포넌트를 사용하는 방법을 보여드리겠습니다. Vue 프로젝트에서 Upload 컴포넌트를 사용할 때 주의사항은 무엇인가요?

이 글에서는 vue 프로젝트에서 element-ui의 Upload 업로드 컴포넌트를 사용하는 예를 소개하고 있습니다. 자세한 내용은 다음과 같습니다.

<el-upload
        v-else
        class=&#39;ensure ensureButt&#39;
        :action="importFileUrl"
        :data="upLoadData"
        name="importfile"
        :onError="uploadError"
        :onSuccess="uploadSuccess"
        :beforeUpload="beforeAvatarUpload"
        >
        <el-button size="small" type="primary">确定</el-button>
로그인 후 복사

그 중 importFileUrl은 백그라운드 인터페이스, upLoadData는 파일 업로드 시 업로드할 추가 매개변수, uploadError는 파일 업로드 실패 시 폴백 함수, uploadSuccess는 파일 업로드 성공 시 폴백 함수, beforeAvatarUpload는 함수입니다. 파일을 업로드하기 전에 호출하면 여기에서 파일 형식을 판단할 수 있습니다. rreee 최근 VUE를 내 프로젝트의 프런트엔드 프레임워크로 사용했는데, 서버에 파일을 업로드해야 할 때 동료가 업로드 작업, 즉 업로드 주소를 동적으로 변경할 수 없다고 말했습니다. 찾아보니 다음과 같은 처리가 필요하다는 것을 발견했습니다.

Action은 필수 매개변수이며 해당 유형은

string

입니다. action을 다음과 같이 작성하고, 그 뒤에 메서드 이름을 입력하고, 원하는 주소를 반환합니다. 코드 예:

이 기사의 사례 당신은 방법을 마스터했습니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 자료:

맞춤형 Ajax 도메인 간 구성 요소 캡슐화

express+multer 노드 이미지 업로드 구현을 위한 특정 단계


위 내용은 Vue 프로젝트에서 업로드 구성 요소를 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿