如何替换 UploadCare 以在 React 中显示图像

Question

现在，上传图片后，它只显示文件名、大小和删除按钮。我想在圆圈上显示图像本身。

请在此处检查代码和框 CLICK HERE

<UploadWrapper>
    <Widget
      localeTranslations={translation}
      publicKey="demopublickey"
      imagesOnly
      previewStep
      clearable
      onfi
      onFileSelect={(file) => {
        if (!file) {
          console.log("File removed from widget");
          return;
        }
        file.done((fileInfo) => {
          console.log("File uploaded: ", fileInfo.cdnUrl);
        });
      }}
    />
  </UploadWrapper>

Answer 1

据我所知，Widget 组件似乎仅用于上传文件而不用于渲染文件。

这是我想出的一个解决方案：使用一些“状态”来存储上传的文件 URL，并有条件地隐藏 Widget 以上传文件或渲染的 div/图像。在图像上的单击处理程序中使用附加到 Widget 的引用来触发重新打开上传对话框。

风格：

import styled, { css } from "styled-components";

...

const UploadWrapper = styled.div`
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;

  ${({ image }) => image ? css`
    & .image {
      position: absolute;
      height: 300px;                      // make a circle
      width: 300px;                       // make a circle
      border-radius: 50%;                 // make a circle
      top: 50%;                           // position div
      overflow: hidden;                   // hide the circle 

      img {
        height: 100%;                     // fill parent div
        width: auto;                      // fill parent div
        transform: translate(-50%, -50%); // center image
        top: 50%;                         // center image
        left: 50%;                        // center image
        position: absolute;
      }
    }

    & .uploadcare--widget {
      display: none;
    }
  ` : css`
    & .image {
      display: none;
    }
  `}

  & .uploadcare--widget__button_type_open {
    height: 300px;
    width: 300px;
    border-radius: 100%;
  }
`;

组件：

const Upload = () => {
  const [image, setImage] = React.useState("");

  const translation = {
    buttons: {
      choose: {
        images: {
          one:
            '<div className="image"><img src="/assets/images/camera.svg" alt="camera" /><br/>Upload photo</div>'
        }
      }
    }
  };

  return (
    <FormWrapper>
      <h1>Hello</h1>
      <UploadWrapper image={image}>
        <div
          className="image"
          onClick={() => widgetApi.current.openDialog()}
        >
          <img src={image} alt="uploaded" />
        </div>
        <Widget
          localeTranslations={translation}
          publicKey="demopublickey"
          imagesOnly
          previewStep
          onFileSelect={(file) => {
            if (!file) {
              console.log("File removed from widget");
              return;
            }
            file.done((fileInfo) => {
              setImage(fileInfo.cdnUrl);
            });
          }}
        />
      </UploadWrapper>
    </FormWrapper>
  );
};