AntdV Upload コンポーネントのアップロード メソッドをカスタマイズする方法の簡単な分析

AntdV Upload コンポーネントのアップロード メソッドcustomRequest をカスタマイズするにはどうすればよいですか?次の記事では、Ant Design Vue の Upload コンポーネント、customRequest のカスタム アップロード メソッドを紹介します。

#customRequest 独自のアップロード方法をカスタマイズできます

需要シナリオ

バックエンド管理システムと UI フレームワークは Vue の Ant Design であり、画像のアップロードには Upload コンポーネントが使用されます。

要件説明: 画像をアップロードし、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 チュートリアル」]

以上がAntdV Upload コンポーネントのアップロード メソッドをカスタマイズする方法の簡単な分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。