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

最新推荐文章于 2024-01-16 14:35:21 发布

前端歌谣

最新推荐文章于 2024-01-16 14:35:21 发布

阅读量167

点赞数 1

文章标签： react.js 学习 javascript

本文链接：https://blog.csdn.net/qq_41632427/article/details/126394541

版权

React项目实战-hook+react17-企业案例专栏收录该内容

61 篇文章 0 订阅

订阅专栏

// 将图片路径转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()
      }
      );
    }
  };