показывать локально загруженные изображения вместе с удаленными изображениями - PullRequest
Новая
       33

показывать локально загруженные изображения вместе с удаленными изображениями

1 голос
/ 06 февраля 2020

Я использую react-dropzone для загрузки изображений. Загрузка изображений может быть как одиночной, так и множественной. На данный момент загрузка изображений и показ предварительного просмотра работает нормально. Однако я не мог показать локальные изображения вместе с удаленным изображением, если существуют удаленные изображения. Я имею в виду, что для формы редактирования могут быть уже загруженные изображения, которые показываются, и если мне нужно загрузить больше изображений вместе с ней, то как я могу показать предварительный просмотр вновь загруженных изображений вместе с уже загруженными изображениями, чтобы я мог отправить все эти изображения на сервер? ,

Вот как я это сделал 

import React from "react";
import styled from "styled-components";
import { useDropzone } from "react-dropzone";

import Preview from "./Preview";

const UploadField = ({
  field,
  form,
  preview,
  label,
  uploadProps,
  ...props
}) => {
  const {
    isDragActive,
    getRootProps,
    getInputProps,
    isDragReject,
    rejectedFiles
  } = useDropzone({
    onDrop: files => {
      form.setFieldValue(
        field.name,
        files.map(file => {
          return Object.assign(file, {
            preview: URL.createObjectURL(file)
          });
        })
      );
    },
    ...uploadProps
  });

  const _handleRemove = file => {
    const newFiles = [...field.value];
    newFiles.splice(file, 1);
    form.setFieldValue(field.name, newFiles);
  };

  const isFileTooLarge =
    rejectedFiles.length > 0 && rejectedFiles[0].size > uploadProps.maxSize;

  const files = field.value;

  if (props.disabled) {
    return null;
  }
  const hasError = form.touched[field.name] && form.errors[field.name];

  return (
    <>
      {label && <Label>{label}</Label>}
      <DropzoneContainer {...getRootProps()}>
        <input
          {...getInputProps()}
          onBlur={e => {
            e.preventDefault();
            field.onBlur(e);
          }}
        />
        {!isDragActive && "Click here or drop a file to upload!"}
        {isDragActive && !isDragReject && "Drop it like it's hot!"}
        {isDragReject && "File type not accepted, sorry!"}
        {isFileTooLarge && (
          <div className="text-danger mt-2">File is too large.</div>
        )}
        {!!hasError && <div className="text-danger mt-2">{hasError}</div>}
      </DropzoneContainer>
      <div>
        {files && files !== undefined && files[0] !== undefined ? (
          <>
            <Preview files={files} isLocal handleRemove={_handleRemove} />
          </>
        ) : (
          <Preview files={preview} isLocal={false} />
        )}
      </div>
    </>
  );
};

export default UploadField;



import React from "react";
import styled from "styled-components";

function localPreview(files, handleRemove) {
  return files.map(file => {
    return (
      <Thumb key={file.name} className="render-preview">
        <ThumbInner className="image-container">
          <Remove onClick={() => handleRemove(file)}>*</Remove>
          <Image src={file.preview} alt={file.name} />
        </ThumbInner>
      </Thumb>
    );
  });
}

function renderImage(file) {
  return (
    <Thumb>
      <ThumbInner>
        <Image src={file} alt={file} />
      </ThumbInner>
    </Thumb>
  );
}

function remotePreview(files) {
  return (
    <>
      {typeof files === "object"
        ? files.map((file, index) => (
            <div key={index}>
              {renderImage(file.documentPath || file.imagePath)}
            </div>
          ))
        : renderImage(files)}
    </>
  );
}

const ImagePreview = ({ files, isLocal, handleRemove }) => {
  return (
    <Wrapper>
      {files && (
        <ThumbsContainer>
          {isLocal ? localPreview(files, handleRemove) : remotePreview(files)}
        </ThumbsContainer>
      )}
    </Wrapper>
  );
};

export default ImagePreview;



<Formik>
        {({ handleSubmit }) => {
          return (
            <>
              <Field
                component={UploadField}
                name="image"
                label="Profile Photo"
                uploadProps={{
                  accept: "image/*",
                  multiple: false,
                  minSize: 0,
                  maxSize: 5242880,
                  imageWidth: 500,
                  imageHeight: 500
                }}
                preview={
                  "https://familybooster.com/image/cache/catalog/products/no-image-800x800.jpg"
                }
              />
              <Field
                component={UploadField}
                name="gallery"
                label="Gallery"
                uploadProps={{
                  accept: "image/*",
                  multiple: true,
                  minSize: 0,
                  maxSize: 5242880,
                  imageWidth: 500,
                  imageHeight: 500
                }}
                preview={[
                  {
                    imagePath:
                      "https://familybooster.com/image/cache/catalog/products/no-image-800x800.jpg"
                  },
                  {
                    imagePath:
                      "https://mizna.org/wp-content/themes/mizna/images/preview.png"
                  }
                ]}
              />
            </>
          );
        }}
      </Formik>
    </div>

Я также создал коды и поле для обхода проблемы, и вот он

https://codesandbox.io/s/pedantic-cori-ryw7i

...