如何在React中实现上传图片后在浏览器端直接预览显示？

解决方案 #

要实现上传图片实时预览，你可以通过浏览器原生的URL.createObjectURL()方法为上传的File对象生成临时可访问的本地预览地址，具体修改逻辑如下： #

1. 修正onDrop方法逻辑 #

首先确认你使用的上传/拖拽组件的回调参数结构：多数同类组件的回调files数组元素本身就是File实例，不需要额外取.file属性，如果你确认你的组件返回结构确实包含.file字段，可自行调整取值逻辑。修改后的代码参考：

onDrop = async (files) => {
    // 基础合法性校验
    if (!files || files.length === 0) return
    const uploadedFile = files[0].file || files[0]
    if (!uploadedFile.type.startsWith('image/')) {
        // 可自行添加非图片类型的错误提示逻辑
        return
    }

    // 生成浏览器可直接读取的临时预览地址
    const previewUrl = URL.createObjectURL(uploadedFile)

    const FILES = {
        "uploaded_image": [{
            name: uploadedFile.name,
            image: previewUrl,
            // 如需后续将图片上传到服务器，可保留原始File对象
            rawFile: uploadedFile
        }]
    }

    this.setState({
        files: FILES.uploaded_image
        // ...其余你需要更新的state字段
    })
    // ...其余业务逻辑调用
}

你现有渲染部分的代码不需要修改，直接使用state中存储的previewUrl作为Image组件的src即可正常展示预览。 #

2. 优化内存释放（可选但推荐） #

URL.createObjectURL()生成的临时地址会持续占用浏览器内存，不需要使用时建议主动释放避免内存泄漏，可在组件卸载、或者切换上传文件时释放旧地址：

componentWillUnmount() {
    // 组件卸载时释放所有已生成的预览地址
    if (this.state.files?.length) {
        this.state.files.forEach(item => {
            if (item.image) URL.revokeObjectURL(item.image)
        })
    }
}

常见问题排查 #

如果确认files[0].file字段确实为空，优先查阅你使用的上传组件官方文档，确认回调参数的返回结构，绝大多数场景下回调返回的files数组元素本身就是可直接使用的File对象。 #

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