在以正确的方式上传之前预览文件。（React Typescript）

Question

我正在尝试在上传之前预览图像文件。

const [selectedFile, setSelectedFile] = useState<File>();
const [preview, setPreview] = useState<string>();

<form action="" onSubmit={onUploadImage}>
                  <input
                    name="file"
                    type="file"
                    accept="image/*"
                    onChange={(event: ChangeEvent<HTMLInputElement>) => {
                      if (!event.target.files) return
                      setSelectedFile(event.target.files[0]);
                      setPreview(URL.createObjectURL(event.target.files[0]));
                    }} />
                    <img src={preview} alt="preview" />
                </form>

以上代码有效。

我想解决的问题是找到更好的方式来预览图像文件。

作为我的代码，我将 selectedFile 设置为 File 的类型，例如 useState<File>(); 由于类型错误，不允许将 selectedFile 设置为 img 标签 <img src={selectedFile} alt="preview" />。这就是为什么我创建了一个新状态 const [preview, setPreview] = useState<string>(); 来预览图像而不是使用 selectedFile 的原因，因为 src 应该是字符串。但是这种设置状态两次的方法很麻烦。

如果您有更好的想法不要像我的代码那样使用双重状态，我将不胜感激。如果可以，我想继续使用useState<File>()

Answer 1

你应该首先看到 selectedFile 的默认值是 null,
然后直接设置图像的 src :

const [selectedFile, setSelectedFile] = useState<File | null>(null);

<input
   onChange={(event: ChangeEvent<HTMLInputElement>) => {
      if (!event.target.files) return
      setSelectedFile(event.target.files[0]);
   }}
/>
<img src={selectedFile === null ? '' : URL.createObjectURL(selectedFile)} alt="preview" />

在以正确的方式上传之前预览文件。（React Typescript）

Preview File before uploading in proper way.(React&Typescript)

image

file

typescript

reactjs

react-hooks