Eine kurze Analyse, wie die Upload-Methode der AntdV-Upload-Komponente „customRequest' angepasst wird

Wie kann ich die Upload-Methode der AntdV-Upload-Komponente „customRequest“ anpassen? Im folgenden Artikel wird Ihnen die benutzerdefinierte Upload-Methode der Upload-Komponente „customRequest“ von Ant Design Vue vorgestellt.

customRequest Sie können Ihre eigene Upload-Methode anpassen

Bedarfsszenarien

Das Hintergrundverwaltungssystem, das UI-Framework ist Ant Design von Vue und die Upload-Komponente wird zum Hochladen von Bildern verwendet.

Anforderungsbeschreibung: Bilder hochladen und in Base64 konvertieren

Implementierungsmethode

In der API-Methode gibt es eine Methode zum Anpassen des Upload-Verhaltens. Durch Überschreiben des Standard-Upload-Verhaltens können Sie Ihre eigene Upload-Implementierung anpassen

customRequest Angepasste Upload-Methode

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

Das hochgeladene Bild wird in base64 konvertiert

//对上传的文件处理
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;
          }
      });
}

[Verwandte Empfehlung: „vue.js Tutorial“]

Das obige ist der detaillierte Inhalt vonEine kurze Analyse, wie die Upload-Methode der AntdV-Upload-Komponente „customRequest' angepasst wird. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!