> 웹 프론트엔드 > View.js > AntdV 업로드 구성요소 customRequest의 업로드 방법을 사용자 정의하는 방법에 대한 간략한 분석

AntdV 업로드 구성요소 customRequest의 업로드 방법을 사용자 정의하는 방법에 대한 간략한 분석

青灯夜游
풀어 주다: 2021-12-24 18:27:13
앞으로
5197명이 탐색했습니다.

AntdV 업로드 구성 요소 customRequest의 업로드 방법을 사용자 정의하는 방법은 무엇입니까? 다음 글에서는 Ant Design Vue의 Upload 컴포넌트 customRequest의 커스텀 업로드 방법을 소개하겠습니다.

AntdV 업로드 구성요소 customRequest의 업로드 방법을 사용자 정의하는 방법에 대한 간략한 분석

customRequest 자신만의 업로드 방법을 맞춤 설정할 수 있습니다

수요 시나리오

배경 관리 시스템, UI 프레임워크는 Vue의 Ant Design이고 업로드 구성 요소는 이미지를 업로드하는 데 사용됩니다.

요구 사항 설명: 이미지 업로드 및 base64로 변환

구현 방법

API 방법에는 업로드 동작을 사용자 정의하는 방법이 있으며, 기본 업로드 동작을 재정의하여 고유한 업로드 구현을 사용자 정의할 수 있습니다

. customRequest 맞춤형 업로드 방법

<a-form-item
  :labelCol="labelCol"
  :wrapperCol="wrapperCol"
  label="照片">
  <a-upload
    v-decorator="[&#39;zp&#39;, validatorRules.zp]"
    listType="picture-card"
    class="avatar-uploader"
    :showUploadList="false"
    :beforeUpload="beforeUpload"
    :customRequest="selfUpload"
  >
    <img v-if="picUrl" :src="getAvatarView()" alt="头像"   style="max-width:90%"/>
    <div v-else>
      <a-icon :type="uploadLoading ? &#39;loading&#39; : &#39;plus&#39;" />
      <div class="ant-upload-text">上传</div>
    </div>
  </a-upload>

</a-form-item>
로그인 후 복사

업로드된 이미지는 base64로 변환됩니다

//对上传的文件处理
selfUpload ({ action, file, onSuccess, onError, onProgress }) {
     console.log(file, &#39;action, file&#39;);
     const base64 = new Promise(resolve => {
         const fileReader = new FileReader();
         fileReader.readAsDataURL(file);
         fileReader.onload = () => {
              resolve(fileReader.result);
              // this.formImg = fileReader.result;
          }
      });
}
로그인 후 복사

[관련 권장사항: "vue.js tutorial"]

위 내용은 AntdV 업로드 구성요소 customRequest의 업로드 방법을 사용자 정의하는 방법에 대한 간략한 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

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