如何使用 Material UI 制作头像选择器答案

【问题标题】：How can i make an avatar chooser with Material UI如何使用 Material UI 制作头像选择器
【发布时间】：2019-07-21 17:22:35
【问题描述】：

我在 react 项目 (react v15.6) 中使用 Material UI v3。

到目前为止我做了什么？

在注册页面中，我可以从用户那里获取一张图片用作他/她的个人资料照片。

我想做的事

我想在头像照片上添加阴影以向他展示可点击的内容。喜欢这张图……

avatarChooserImage

有人可以告诉我，我该怎么做？我没有任何线索。我尝试使用纯 CSS，但付出了很多努力。

【问题讨论】：

为什么答案有 5 个赞成票却被反对？人们正在搜索并找到有助于节省时间的答案。如果一开始就没有这个问题，你只会继续在谷歌上搜索浪费更多时间。如果您看到改进的方法并通过投票说“感谢您节省我的时间”，请建议进行编辑。我只是反对无声的投票，因为这提供了关于如何改进的最少或没有信息。归根结底，这样的投入会产生更积极的影响，有助于使 SO 变得更好。
感谢@vir 我们分享您的立场。当我只有 1~2 个月的前端开发经验时，我提出了这个问题，是的，现在我可以看到我可以做出的一些改进。但我想知道任何可以帮助更多有同样问题的人的东西。
codesandbox.io/s/material-ui-avatar-upload-example-hgfux

标签： reactjs material-ui picker avatar

【解决方案1】：

你可以做一些像这样简单的事情，

<IconButton>
 <Avatar 
  src="/images/example.jpg" 
  style={{
    margin: "10px",
    width: "60px",
    height: "60px",
  }} 
 />
</IconButton>

这让你有一个可点击的头像。

但由于您也将其用作文件输入，也许您可以这样做，

<input
 accept="image/*"
 className={classes.input}
 id="contained-button-file"
 multiple
 type="file"
/>
<label htmlFor="contained-button-file">
  <IconButton>
   <Avatar 
     src="/images/example.jpg" 
     style={{
      margin: "10px",
      width: "60px",
      height: "60px",
     }} 
    />
  </IconButton>
</label>

要对“编辑”进行叠加，请查看css image overlay。这解释了如何在 Avatar Icon 上放置一个图层，它应该回答你的问题。

P.S 如果它回答了您的问题，请接受此作为正确答案，谢谢。

【讨论】：

谢谢，效果很好！但是我可以用“编辑”文本来处理阴影部分吗？
@Firus，我编辑了我的帖子，看看链接，它应该可以帮助你做覆盖的事情
感谢您的帮助和耐心等待。我做了我的头像选择器！
别担心，编码愉快！
这不起作用。通过将 IconButton 更改为 <IconButton component='span'> 来修复它

【解决方案2】：

文档中有一个类似的例子：

https://material-ui.com/components/buttons/#upload-button

您可以使用“头像”来代替“PhotoCamera”。允许您单击您的头像来上传这样的图像，例如：

import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Avatar from '@material-ui/core/Avatar';
import IconButton from '@material-ui/core/IconButton';



const useStyles = makeStyles((theme) => ({
  root: {
    alignSelf: 'center',
    justifyContent: "center",
    alignItems: "center",
    display: 'flex',
    '& > *': {
      margin: theme.spacing(1),
    },
  },
  input: {
    display: "none",
  },
  large: {
    width: theme.spacing(7),
    height: theme.spacing(7),
  },
}));

export default function ProfileAvatar() {
  const classes = useStyles();


  return (

    <div className={classes.root}>

      <input accept="image/*" className={classes.input} id="icon-button-file" type="file" />
      <label htmlFor="icon-button-file">
        <IconButton color="primary" aria-label="upload picture" component="span">
          <Avatar src="https://www.w3schools.com/howto/img_avatar.png" className={classes.large} />
        </IconButton>
      </label>
    </div>
  );
}

【讨论】：