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

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

青灯夜游

リリース： 2021-12-24 18:27:13

転載

5170 人が閲覧しました

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

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

#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 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 チュートリアル」]

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