ant design vue 上传图片base64转码

需求,上传的图片传给后台,包括后台返回的都是base64类型的。

前端把上传的图片转成base64传给后台

 

 

<a-form-model-item>
      <a-upload
         name="file"
         list-type="picture-card"
         class="avatar-uploader"
         :show-upload-list="false"
         :multiple="false"
         :before-upload="beforeUpload"
         :action="uploadUrl"
         :customRequest="selfUpload"
         @change="handleChangeFile"
         >
           <a-avatar
                v-if="formImg.projectRendering"
                 :src="downloadUrl + '/' + formImg.projectRendering"
                 alt="avatar"
                 shape="square"
              />
             <div v-else>
                  <a-icon :type="loading ? 'loading' : 'plus'" />
                  <div class="ant-upload-text">导入图片</div>
              </div>
         </a-upload>
</a-form-model-item>

  

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

  

 

posted @ 2021-10-23 22:06  紫诺花开  阅读(1372)  评论(0编辑  收藏  举报