A brief analysis of how to customize the upload method of AntdV Upload component customRequest

How to customize the upload method of AntdV Upload component customRequest? The following article will introduce to you the custom upload method of Ant Design Vue's Upload component customRequest. I hope it will be helpful to you!

customRequest You can customize your own upload method

Demand scenarios

Backend The management system and UI framework are Ant Design of Vue and the Upload component is used to upload images.

Requirement description: Upload images and convert them to base64

Implementation method

In the API method, there is a method to customize the upload behavior, by overwriting The default upload behavior, you can customize your own upload implementation

customRequestcustom upload method

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

The uploaded image is converted to 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;
          }
      });
}

【Related recommendation: "vue.js Tutorial"】

The above is the detailed content of A brief analysis of how to customize the upload method of AntdV Upload component customRequest. For more information, please follow other related articles on the PHP Chinese website!