Une brève analyse de la façon de personnaliser la méthode de téléchargement du composant AntdV Upload customRequest

Comment personnaliser la méthode de téléchargement du composant AntdV Upload customRequest ? L'article suivant vous présentera la méthode de téléchargement personnalisée du composant Upload d'Ant Design Vue customRequest. J'espère qu'il vous sera utile !

customRequest Vous pouvez personnaliser votre propre méthode de téléchargement

Scénarios de demande

Le système de gestion d'arrière-plan, le cadre d'interface utilisateur est Ant Design de Vue et le composant Upload est utilisé pour télécharger des images.

Description de l'exigence : télécharger des images et les convertir en base64

Méthode d'implémentation

Dans la méthode API, il existe une méthode pour personnaliser le comportement de téléchargement en remplaçant le comportement de téléchargement par défaut, vous pouvez personnaliser votre propre implémentation de téléchargement

. customRequest Méthode de téléchargement personnalisée

<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>

L'image téléchargée est convertie en 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;
          }
      });
}

[Recommandation associée : "Tutoriel vue.js"]

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!