1

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

以下是组件。我正在调用一个 api，它将返回我的 url，并且我正在设置状态，以用于进一步的目的。

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;
4

1 回答 1

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 组件之外——即不能作为它的子组件——否则它将不起作用。

于 2020-01-18T04:49:10.263 回答