如何将JavaScript File类型图片对象设置为<img>标签的src属性值

你遇到的Failed to execute 'readAsDataURL' on 'FileReader': parameter 1 is not of type 'Blob'报错，本质是实际传入方法的参数不符合Blob类型要求，即使控制台打印的内容看起来是File对象，也大概率是取值时机、取值方式存在问题。

调用文件读取逻辑前先添加参数合法性校验：

if (file && file instanceof Blob) {
  // 再执行后续预览逻辑
} else {
  console.log('非法参数', file)
}

如果校验不通过，常见的错误场景包括：

• 直接把文件选择器返回的类数组FileList对象传入，没有取下标为0的元素
• 在React合成事件的异步回调里取值，没有调用e.persist()导致事件对象被回收
• File对象从iframe、Worker等跨上下文环境传递而来，instanceof判断失效

优先使用URL.createObjectURL方案，代码更简洁、性能损耗更低：

import { useState, useEffect } from 'react'

function ImagePreview({ file }) {
  const [previewUrl, setPreviewUrl] = useState('')

  useEffect(() => {
    if (!file || !(file instanceof Blob)) return
    // 生成临时预览链接
    const tempUrl = URL.createObjectURL(file)
    setPreviewUrl(tempUrl)
    // 组件卸载时释放内存，避免泄漏
    return () => URL.revokeObjectURL(tempUrl)
  }, [file])

  return previewUrl ? <img src={previewUrl} alt="图片预览" /> : <div>暂无有效图片</div>
}

如果你坚持要使用FileReader实现，正确写法如下：

import { useState, useEffect } from 'react'

function ImagePreview({ file }) {
  const [previewUrl, setPreviewUrl] = useState('')

  useEffect(() => {
    if (!file || !(file instanceof Blob)) return
    const reader = new FileReader()
    reader.onload = () => {
      setPreviewUrl(reader.result)
    }
    reader.readAsDataURL(file)
  }, [file])

  return previewUrl ? <img src={previewUrl} alt="图片预览" /> : <div>暂无有效图片</div>
}

你打印的File对象type字段为空是浏览器未识别到文件的mime类型，只要文件本身是合法图片格式，不会影响正常渲染。

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