通过<input type='file'>获取文件后img标签无法渲染图片如何解决

1 先修复[0] undefined报错 #

出现该报错的核心原因是页面首次渲染时，product.selectedFile还未完成赋值，初始值为空/undefined，读取未定义变量的索引属性自然会抛出错误。
修复方案：渲染img标签前先加存在性判断，推荐用可选链语法简化判断：

/* 只有selectedFile存在且有至少1个文件时才渲染img */
{product.selectedFile?.length > 0 && (
  <img 
    className={classes.img} 
    {/* 这里后续替换为正确的图片地址 */}
    src={URL.createObjectURL(product.selectedFile[0])} 
    alt={product.title}
  />
)}

如果你的框架不支持可选链，也可以用普通逻辑与判断：

{product.selectedFile && product.selectedFile.length > 0 && (
  <img className={classes.img} src={xxx} alt={product.title}/>
)}

同时要注意：e.target.files是浏览器原生的FileList类数组对象，如果你会对product做序列化操作（比如转JSON提交给后端、存入本地存储后再读取），FileList的类数组结构会丢失，建议转成普通数组再存到状态里：

onChange={(e) => {
  // 把FileList转成普通数组，避免序列化丢失属性
  const fileList = Array.from(e.target.files);
  setPostProduct({ 
    ...postProduct,
    selectedFile: fileList,
  });
}}

2 修复图片无法渲染的问题 #

你之前直接把File对象传给src是无效的，img标签的src属性只识别URL字符串、base64字符串两种格式，有两种常用解决方案：

方案一：使用URL.createObjectURL（推荐，性能更好） #

直接把File对象转成临时的本地URL给img使用，代码如下：

src={URL.createObjectURL(product.selectedFile[0])}

注意：组件卸载时要调用URL.revokeObjectURL()释放临时URL占用的内存，避免内存泄漏。

方案二：直接使用你已获取的base64字符串 #

如果你已经把File转成了data:image/jpeg;base64,xxxx格式的base64字符串，直接把该字符串赋值给src即可：

// 假设你把转好的base64存在product.fileBase64字段里
src={product.fileBase64}

多文件展示提示 #

如果要展示所有选中的多图，遍历selectedFile数组生成多个img标签即可，不要只读取[0]索引。

内容的提问来源于stack exchange，提问作者lunar