React应用中用户上传图片后如何在网页上即时进行展示？

• 你为type="file"的文件选择框绑定了value属性，这类输入框是浏览器原生只读控件，不支持受控绑定，会直接触发运行报错
• 你通过e.target.value拿到的是浏览器出于安全策略伪装的假路径（格式为C:\fakepath\文件名），无法直接作为<img>标签的src属性加载图片
• 现有逻辑没有实现文件上传到服务器的流程，也没有接收服务器返回的可访问图片地址的处理逻辑

我们可以分两步实现需求：首先处理本地文件选择生成临时预览地址，用户提交后将文件上传到服务器，拿到服务器返回的正式图片地址后替换展示即可。

修改后的完整代码如下：

import React, { useState, useRef, useEffect } from 'react'
import './App.css'

function App() {
  // 存储选中的本地文件对象
  const [selectedFile, setSelectedFile] = useState(null)
  // 存储最终要展示的图片地址（可以是临时预览地址/服务器返回的正式地址）
  const [imageUrl, setImageUrl] = useState('')
  const fileInputRef = useRef(null)

  // 组件卸载时释放临时预览地址占用的内存
  useEffect(() => {
    return () => {
      if (imageUrl.startsWith('blob:')) {
        URL.revokeObjectURL(imageUrl)
      }
    }
  }, [imageUrl])

  // 选择文件的处理逻辑
  const fileChangeHandle = (e) => {
    const file = e.target.files[0]
    if (!file) return
    setSelectedFile(file)
    // 生成临时预览地址，实现选择后即时预览
    const tempUrl = URL.createObjectURL(file)
    setImageUrl(tempUrl)
  }

  const submitHandle = async (e) => {
    e.preventDefault()
    if (!selectedFile) {
      console.log('please upload an image')
      return
    }
    console.log('开始上传文件')
    // 构造FormData上传文件
    const formData = new FormData()
    formData.append('image', selectedFile)
    try {
      // 这里替换成你实际的后端上传接口地址
      const res = await fetch('你的后端上传接口URL', {
        method: 'POST',
        body: formData
      })
      const data = await res.json()
      // 假设接口返回的正式图片地址存在data.url字段
      // 释放之前的临时预览地址，替换为服务器返回的正式地址
      if (imageUrl.startsWith('blob:')) {
        URL.revokeObjectURL(imageUrl)
      }
      setImageUrl(data.url)
      console.log('上传成功')
      // 可选：清空文件选择框
      fileInputRef.current.value = ''
      setSelectedFile(null)
    } catch (err) {
      console.error('上传失败', err)
    }
  }

  return (
    <section>
      <div>
        <div>
          <h1>heading one</h1>
          <form onSubmit={submitHandle}>
            <input
              ref={fileInputRef}
              onChange={fileChangeHandle}
              type='file'
              accept='image/gif, image/jpeg, image/png'
            />
            <button type='submit'>submit</button>
          </form>
          {imageUrl && <img src={imageUrl} alt='preview' style={{maxWidth: '300px'}} />}
        </div>
      </div>
    </section>
  )
}

export default App

• 取消了文件选择框的value属性绑定，改用ref操作原生控件
• 使用URL.createObjectURL生成本地文件的临时预览地址，实现选择文件后即时预览效果
• 提交时通过FormData封装文件对象发送到后端，上传成功后用接口返回的正式线上地址替换临时预览地址
• 增加了临时地址的内存释放逻辑，避免内存泄漏

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