React图片上传：获取文件数据及img语法正确性咨询

a) 获取文件数据的event字段 #

要获取选中的文件，需要访问event.target.files[0]：

• event.target指向触发事件的input元素
• files是input的属性，返回一个FileList对象，包含用户选中的所有文件（这里是单文件选择，所以取索引0的元素）

修改后的回调函数示例：

handle_userImage_change = (event) => {
  const file = event.target.files[0];
  if (!file) return;
  
  const reader = new FileReader();
  reader.onload = (e) => {
    this.setState({ userImage: e.target.result });
  };
  reader.readAsDataURL(file);
}

b) img标签的语法优化 #

现有img标签的语法基本正确，但有两个可优化的点：

1. 必须添加alt属性（符合HTML语义化标准，也能在图片加载失败时提供提示）
2. 当this.state.userImage为空时，最好避免渲染空的img标签，或者设置默认占位

优化后的img标签示例：

{this.state.userImage ? (
  <img src={this.state.userImage} alt="用户选择的图片" />
) : (
  <p>请选择一张图片</p>
)}

或者简单添加alt属性：

<img src={this.state.userImage} alt="用户预览图" />

内容的提问来源于stack exchange，提问作者Jose Cabrera Zuniga