时间戳

首页 > 解决方案 > 文件上传器不显示图片

javascript - 文件上传器不显示图片

问题描述

我有个问题。我正在创建一个小文件上传器，用于上传照片。如果用户按下图标，文件上传器就会出现，然后他可以选择一张照片。选择照片后不显示。问题究竟出在哪里？

import React, { useState } from 'react';

const Profilpic = () => {
  const [preview, setPreview] = useState(null);

  const fileSelectedHandler = (event) => {
    console.log(event.target.files[0]);
    if (event.target.files[0].size > 71680) {
      alert('File is too big! Wie Samys Dick');
    } else {
      setPreview(event.target.files[0]);
    }
  };

  return (
    <div>
      {preview ? (
        <img src={preview} alt="Preview" width="150px" height="150px" />
      ) : (
        <div>
          <label htmlFor="myInput">
            <i className="fas fa-user-circle"></i>
          </label>
          <input
            id="myInput"
            style={{ display: 'none' }}
            type={'file'}
            onChange={fileSelectedHandler}
          />
        </div>
      )}
    </div>
  );
};

export default Profilpic;

标签： javascriptreactjsfilephoto

解决方案

首先从输入标签中删除样式标签，然后用那个替换函数

const fileSelectedHandler = (event) => {
    console.log(event.target.files[0]);

    if (event.target.files[0].size > 71680) {
      alert("File is too big! Wie Samys Dick");
    } else {
      const reader = new FileReader();

      reader.readAsDataURL(event.target.files[0]);
      reader.onloadend = () => {
        setPreview(reader.result);
      };
    }
  };

推荐阅读