react项目实战学习笔记-学习56-图片上传成功

简介: react项目实战学习笔记-学习56-图片上传成功
+关注继续查看
// 将图片路径转base64
function getBase64(img, callback) {
    const reader = new FileReader();
    reader.addEventListener('load', () => callback(reader.result));
    reader.readAsDataURL(img);
  }
  
  // 点击了上传图片
  const handleChange = info => {
    if (info.file.status === 'uploading') {
      setLoading(true)
      return;
    }
    if (info.file.status === 'done') {
      // Get this url from response in real world.
      getBase64(info.file.originFileObj, imageUrl =>{
        setLoading(false)
        setImageUrl(imageUrl)
        // 存储图片名称
        localStorage.setItem('avatar', info.file.response.data.filePath)
        // 使用react-redux
        props.addKey()
      }
      );
    }
  };
相关文章
|
1月前
|
前端开发
前端学习笔记202307学习笔记第六十二天-react原理之1
前端学习笔记202307学习笔记第六十二天-react原理之1
23 0
|
1月前
|
前端开发
前端学习笔记202307学习笔记第六十一天-react知识点串讲之6
前端学习笔记202307学习笔记第六十一天-react知识点串讲之6
19 0
|
1月前
|
前端开发
前端学习笔记202307学习笔记第六十一天-react知识点串讲之11
前端学习笔记202307学习笔记第六十一天-react知识点串讲之11
20 0
|
1月前
|
前端开发
前端学习笔记202307学习笔记第六十一天-react知识点串讲之12
前端学习笔记202307学习笔记第六十一天-react知识点串讲之12
19 0
|
1月前
|
前端开发
前端学习笔记202305学习笔记第二十九天-React keep alive原理之
前端学习笔记202305学习笔记第二十九天-React keep alive原理之4
16 0
|
1月前
|
前端开发
前端学习笔记202305学习笔记第二十九天-React keep alive原理之7
前端学习笔记202305学习笔记第二十九天-React keep alive原理之7
15 0
|
1月前
|
前端开发
前端学习笔记202305学习笔记第二十九天-React keep alive原理之8
前端学习笔记202305学习笔记第二十九天-React keep alive原理之8
21 0
|
1月前
|
前端开发
前端学习笔记202305学习笔记第二十九天-React keep alive原理之1
前端学习笔记202305学习笔记第二十九天-React keep alive原理之1
21 0
|
1月前
|
前端开发
前端学习笔记202305学习笔记第二十九天-React keep alive原理之2
前端学习笔记202305学习笔记第二十九天-React keep alive原理之2
19 0
|
1月前
|
前端开发
前端学习笔记202305学习笔记第二十九天-React keep alive原理之4
前端学习笔记202305学习笔记第二十九天-React keep alive原理之4
20 0
相关产品
云迁移中心
相关实验场景
更多
推荐文章
更多