React实现上传默认文件：如何从导入的图片生成File对象

你可以通过fetch请求导入的图片资源路径，将其转为Blob格式后再封装为File对象即可实现需求，具体修改代码如下：

import './App.css';
import React,{Component} from 'react';
import defaultImg from "./default_files/logo192.png"

class App extends Component {
  // 初始状态file留空，后续挂载时生成
  state = {
    img: {
      file: null,
      preview: defaultImg,
    }
  };

  componentDidMount() {
    // 组件挂载时生成默认File对象
    this.getDefaultFile()
  }

  // 生成默认图片的File对象方法
  getDefaultFile = async () => {
    try {
      // 请求静态图片资源转blob
      const response = await fetch(defaultImg)
      const blob = await response.blob()
      // 封装为File对象，参数分别是：blob数据、文件名、文件类型配置
      const defaultFile = new File([blob], "logo192.png", { type: blob.type })
      // 更新state中的file字段
      this.setState(prev => ({
        img: { ...prev.img, file: defaultFile }
      }))
    } catch (err) {
      console.error("默认文件生成失败：", err)
    }
  }

  onImgChange = event => {
    // 上传文件时更新状态
    this.setState({
      img: {
        file:event.target.files[0],
        preview: URL.createObjectURL(event.target.files[0])
      },
    });
  };

  // 原代码function作为方法名属于语法错误，修改为合法命名即可
  handleSubmit = () => {
    // 后续业务逻辑，不管用户有没有上传，取this.state.img.file都能拿到对应文件
    const submitFile = this.state.img.file
    // 提交接口等操作
    return
  }

  render() {
    return (
      <div className="App">
        <img src={this.state.img.preview} style={{ width: 192, height: 256 }} alt="预览图"/>
        <input type="file" onChange={this.onImgChange} />
        <button onClick={this.handleSubmit}>提交</button>
      </div>
    );
  }
}

export default App;

注意事项 #

• 如果你不需要在组件初始化就拿到File对象，也可以把getDefaultFile的调用放到提交逻辑里，判断如果this.state.img.file为null的时候再生成，能减少不必要的初始化请求
• 如果生产环境的静态资源有跨域配置，需要确保图片资源允许当前域名请求，否则fetch会失败

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