ReactJS如何实现组件间文件传递（子组件向父组件传文件）

File对象本身是JavaScript内置的引用类型值，和你传递name、size这类基础属性的逻辑完全一致，不需要做序列化、格式转换类的特殊处理，直接传递实例本身即可。

注意：禁止用JSON.stringify()处理File对象后传递，会直接丢失文件的二进制内容，导致后续无法渲染、上传文件。

子传父场景实现逻辑 #

子组件通过文件输入拿到图片后传给父组件渲染的场景，不管使用什么前端框架，核心逻辑都是：子组件拿到选中的File实例后，通过自定义事件/回调函数把实例作为参数传递给父组件，父组件接收后直接使用即可。

Vue 3 代码示例 #

子组件（文件输入组件）

<template>
  <input type="file" accept="image/*" @change="onFileChange" />
</template>

<script setup>
const emit = defineEmits(['select'])
const onFileChange = (e) => {
  const file = e.target.files[0]
  if (file) {
    // 直接抛出完整File对象
    emit('select', file)
  }
}
</script>

父组件（接收渲染组件）

<template>
  <FileInput @select="onFileReceive" />
  <img v-if="previewUrl" :src="previewUrl" alt="图片预览" />
</template>

<script setup>
import { ref } from 'vue'
import FileInput from './FileInput.vue'

const previewUrl = ref('')
const onFileReceive = (file) => {
  // 这里拿到的就是完整File对象，所有属性、二进制内容都存在
  console.log(file.name, file.size, file.type)
  // 生成临时预览地址直接渲染
  previewUrl.value = URL.createObjectURL(file)
}
</script>

React 代码示例 #

子组件（文件输入组件）

export default function FileInput({ onSelect }) {
  const onFileChange = (e) => {
    const file = e.target.files[0]
    if (file) {
      // 直接通过回调传完整File对象
      onSelect(file)
    }
  }
  return <input type="file" accept="image/*" onChange={onFileChange} />
}

父组件（接收渲染组件）

import { useState } from 'react'
import FileInput from './FileInput'

export default function Parent() {
  const [previewUrl, setPreviewUrl] = useState('')

  const onFileReceive = (file) => {
    // 拿到完整File实例
    console.log(file)
    setPreviewUrl(URL.createObjectURL(file))
  }

  return (
    <div>
      <FileInput onSelect={onFileReceive} />
      {previewUrl && <img src={previewUrl} alt="图片预览" />}
    </div>
  )
}

注意事项 #

• 不需要拆分File属性传递，零散的name、size等元数据无法还原文件内容，后续渲染、上传都需要完整的File实例
• 拿到File对象做本地预览优先用URL.createObjectURL()，比转base64性能更好，占用内存更少，预览完成如果不需要了记得调用URL.revokeObjectURL()释放内存
• 多层组件传递时，File对象和普通引用值传递逻辑完全一致，用逐层传参、全局状态管理都可以，不会因为传递丢失内容

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