Analisis ringkas tentang cara menyesuaikan kaedah muat naik AntdV Upload component customRequest

Bagaimana untuk menyesuaikan kaedah muat naik AntdV Upload component customRequest? Artikel berikut akan memperkenalkan kepada anda kaedah muat naik tersuai Permintaan tersuai komponen Muat Naik Ant Design Vue Saya harap ia akan membantu anda.

customRequest Anda boleh menyesuaikan kaedah muat naik anda sendiri

Senario permintaan

Backback Sistem pengurusan dan rangka kerja UI ialah Ant Design of Vue dan komponen Muat Naik digunakan untuk memuat naik imej.

Penerangan keperluan: Muat naik imej dan tukarkannya kepada base64

Kaedah pelaksanaan

Dalam kaedah API, terdapat kaedah untuk menyesuaikan tingkah laku muat naik dengan mengatasi tingkah laku muat naik lalai, anda boleh menyesuaikan pelaksanaan muat naik anda sendiri

kaedah muat naik tersuaiPermintaan tersuai

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

Imej yang dimuat naik ditukar kepada 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;
          }
      });
}

[Cadangan berkaitan: "tutorial vue.js"]

Atas ialah kandungan terperinci Analisis ringkas tentang cara menyesuaikan kaedah muat naik AntdV Upload component customRequest. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!