覆盖onDrop事件破坏了ImageInput预览

Question

我正在尝试覆盖onDrop()中的<ImageInput>，但是在上传文件时失败。它不显示图像预览。

以下为组件。我正在调用一个api，它将返回我的url，并且为了进一步的目的，我将其设置为state。

import React, { Component } from 'react';
import { ImageInput, ImageField } from 'react-admin';

import service from '../../providers/service';

class ImageUpload extends Component {
  onDropChange = (files) => {
    const file = new FormData();
    file.append('image', files[0]);
    service('post', 'upload', file)
      .then((response) => {
        response.data.partner_logo_url = response.data.url;
        this.props.onPartnerLogo(response.data.url);
        return response;
      });
  };

  render() {
    const { source, validate, label } = this.props;

    return (
      <ImageInput
        source={source}
        validate={validate}
        label={label}
        accept="image/*"
        options={{
          onDrop: this.onDropChange,
        }}
      >
        <ImageField source="src"/>
      </ImageInput>
    );
  }
}

export default ImageUpload;

Answer 1

我刚遇到相同的问题。

我尝试使用onChange而不是onDrop，并且可以正确显示预览。不幸的是，仅当我单击图像加载器并从文件对话框加载图像时，onChange才会触发。从Finder拖放图像文件时，它不会触发。 （那是在Mac OS X Mojave上。）所以对我来说并没有太大用处。

最后，我通过完全删除ImageField组件并仅使用普通的img标签来解决此问题。然后，我使用onDrop回调将img标签的src设置为传递给回调的fileObj参数的Preview属性。

const ImageForm = props => {
  const [previewPath, setPreviewPath] = useState("");

  const handleImageChange = fileObj => {
    setPreviewPath(fileObj[0].preview);
  };

  return (
    <SimpleForm {...props}>
      <ImageInput
        source="pictures"
        label="Image"
        accept="image/*"
        options={{ onDrop: handleImageChange }}
      />
      {previewPath && previewPath !== "" ? (
        <img
          src={previewPath}
          title="preview"
          alt="preview"
        />
      ) : null}
    </SimpleForm>
  );
};

注意：img标签必须位于ImageInput组件的外部-即not作为它的子元素-否则将不起作用。