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

AntdV 업로드 구성 요소 customRequest의 업로드 방법을 사용자 정의하는 방법은 무엇입니까? 다음 글에서는 Ant Design Vue의 Upload 컴포넌트 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 src="/static/imghwm/default1.png"  data-src="getAvatarView()"  class="lazy"  v-if="picUrl" : 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, 'action, file');
     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 중국어 웹사이트의 기타 관련 기사를 참조하세요!