时间戳

首页 > 解决方案 > 使用 FileUploader 动态添加 ImagePreview

javascript - 使用 FileUploader 动态添加 ImagePreview

问题描述

背景：

我正在创建一个用户个人资料表单，用户可以在其中添加地点。当用户单击“添加”或“删除”按钮时，会动态添加或删除这些位置。每个 Place 都有一个PlaceName, FileUploader, 一个img显示所选文件的标签和一个Delete Button用于删除该 Place 的标签。

目标： 我想做的是，当用户选择图像时，它应该显示在关联的img标签中。

当前工作： 我有一个状态变量ImagePreview，它是一个数组，它将包含上传的文件和placeNameCounter指示添加了多少个地方的变量，这是为了让每个input（文件上传者）都有一个唯一的 id，所以第一个有customFile0第二个一个会拥有customFile1等等。每个都有一个onChange监听器来更改状态变量ImagePreview，以便img可以设置标签。

const GuideProfileForm = () => {
  let placeNameCounter = 0; //will convert this into state variable currently facing some issue
  const [ImagePreview, setImagePreview] = useState([]);
  const onImageChange = e => {
    setImagePreview([
      ...ImagePreview,
      {
        [e.target.id]: URL.createObjectURL(e.target.files[0])
      }
    ]);
  }
};

input和img标签_

<input
  type="file"
  className="custom-file-input "
  id={"customFile" + placeNameCounter} //this is actually passed as props in the acutal code
  onChange={e => onImageChange(e)}
/>;
<img
  className="GuidePlaceImage"
  src={
    ImagePreview[placeNameCounter] &&
    ImagePreview[placeNameCounter]["counterFile" + placeNameCounter]
  }
/>;

CodeSandbox here （我解决了这个问题，文件上传器之前没有工作）

任何帮助将不胜感激

标签： javascriptreactjs

解决方案

我认为既然setImagePreview是异步的，我们在方法中没有可用的事件。一个简单的修复可能是事先保存密钥，例如： const key = e.target.id;

工作示例：https ://codesandbox.io/s/great-violet-owpgt

推荐阅读