码迷,mamicode.com
首页 > Web开发 > 详细

antd的upload组件,阻止默认上传事件,自定义

时间:2020-12-02 12:10:50      阅读:11      评论:0      收藏:0      [点我收藏+]

标签:data   jpg   sel   bsp   for   ant   new   list   back   

原上传默认会请求一个url,就算不填action也会请求首页,不合逻辑

 

使用beforeUpload属性

<Upload
  key="upload"
  beforeUpload={beforeUpload}
  className={styles.upload}
  accept=".png, .jpg, .jpeg, .bmp, mp4"
  listType="picture-card"
  showUploadList={false}
></Upload>;

return false阻止默认事件,自己取出base64进行操作

//上传资源事件重写
const beforeUpload = (file) => {
  getBase64(file, (imageUrl) => {
    setloadimg(imageUrl);
    onSelectUploadImage(imageUrl);
  });
  return false;
};

//取图片base64
const getBase64 = (img, callback) => {
  const reader = new FileReader();
  reader.addEventListener(‘load‘, () => callback(reader.result));
  reader.readAsDataURL(img);
};

 

antd的upload组件,阻止默认上传事件,自定义

标签:data   jpg   sel   bsp   for   ant   new   list   back   

原文地址:https://www.cnblogs.com/wuhairui/p/14048152.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!