Reactjs 使用React功能预览图像上载

您好，我正在尝试进行图像上传和预览，但我只能找到关于如何使用类组件进行此操作的react教程

import React from 'react';


const AddNew = () => {
    const fileHandler = (event) => {
        console.log(event.target.files[0])
    }
    const alt = (event) => {
        return(event.target.files[0].name)
    }
    const preview = (event) => {
        return (
            URL.createObjectURL(event.target.files[0])
        )
    }
    return (
        <div className="addNew">
            <img src={preview} alt={alt}/>
            <input type="file" onChange={fileHandler} />
        </div>
    )
}

export default AddNew

从“React”导入React；
const AddNew=（）=>{
const fileHandler=（事件）=>{
console.log（event.target.files[0]）
}
常量alt=（事件）=>{
返回（event.target.files[0].name）
}
常量预览=（事件）=>{
返回(
URL.createObjectURL（event.target.files[0]）
)
}
返回(
)
}
导出默认AddNew

如何使用此语法预览它

---

由于道具“src”和“alt”的值无效，我收到一个错误。

您需要使用

FileReader

将图像转换为base64字符串。假设您正在执行单个文件上载，只需维护一个状态，例如：

file

，并在

filereader

onload

侦听器读取完图像后设置该状态

您的代码的工作副本如下：

从“React”导入React，{useState}；
const AddNew=（）=>{
const[file，setFile]=useState（null）；
const fileHandler=event=>{
console.log（event.target.files[0]）；
let reader=new FileReader（）；
reader.onload=函数（e）{
setFile（e.target.result）；
};
reader.readAsDataURL（event.target.files[0]）；
};
返回(
);
};
导出默认的AddNew；

使用一点状态为

src

和

alt

提供初始值，并保存更新后的值

const initialState = { alt: "", src: "" };

const AddNew = () => {
  const [{ alt, src }, setPreview] = useState(initialState);

  const fileHandler = event => {
    const { files } = event.target;
    setPreview(
      files.length
        ? {
            src: URL.createObjectURL(files[0]),
            alt: files[0].name
          }
        : initialState
    );
  };

  return (
    <div className="addNew">
      <img className="preview" src={src} alt={alt} />
      <input accept="image/*" type="file" onChange={fileHandler} />
    </div>
  );
};

const initialState={alt:，src:}；
const AddNew=（）=>{
const[{alt，src}，setPreview]=useState（initialState）；
const fileHandler=event=>{
const{files}=event.target；
设置预览(
文件长度
? {
src:URL.createObjectURL（文件[0]），
alt:文件[0]。名称
}
：初始状态
);
};
返回(
);
};

---

您需要使用state让React知道何时重新渲染。您可以使用useState钩子保存组件状态和文件信息，当它发生更改时，React知道该渲染了

const AddNew=（{}）=>{
const[file，setFile]=React.useState（null）
const fileHandler=（e）=>{
setFile（e.target.files[0]）
}
返回(
)
}
ReactDOM.render（，document.getElementById（'root'））