使用API平台的管理组件上传文件不起作用

Question

在API平台文档中，有一个部分处理文件上传。带有vichuploaderbundle的代码如预期的。但是，在文档中，有关管理文件和图像的管理组件不起作用。至少创建和编辑表单不会显示。我知道我必须对代码进行一些调整以使其与处理文件上传时的代码一起使用，但它仍然没有给我预期的结果。

我已经修改了app.js文件

import React from 'react';
import { FunctionField, ImageField, ImageInput } from 'react-admin';
import { HydraAdmin } from '@api-platform/admin';
import parseHydraDocumentation from '@api-platform/api-doc-parser/lib/hydra/parseHydraDocumentation';
const entrypoint = "http://localhost:8080";
const myApiDocumentationParser = entrypoint => parseHydraDocumentation(entrypoint)
  .then( ({ api }) => {
    api.resources.map(resource => {
      if ('http://schema.org/MediaObject' === resource.id) {
        resource.fields.map(field => {
          if ('http://schema.org/contentUrl' === field.id) {
            field.denormalizeData = value => ({
              src: value
            });
            field.field = props => (
              <ImageField {...props} source={`${field.name}.src`} />
            );
            console.log(field);
            field.input = (
              <ImageInput accept="image/*" key={field.name} multiple={false} source={field.name}>
                <ImageField source="src"/>
              </ImageInput>
            );
            field.normalizeData = value => {
              if (value && value.rawFile instanceof File) {
                console.log("inst of file");
                const body = new FormData();
                body.append('file', value.rawFile);
                return fetch(`${entrypoint}/media_objects`, { body, method: 'POST' })
                  .then(response => response.json());
              }
              return value.src;
            };
          }
          return field;
        });
      }
      return resource;
    });
    return { api };
  });

export default (props) => <HydraAdmin apiDocumentationParser={myApiDocumentationParser} entrypoint={entrypoint}/>;

我在客户端上遇到以下错误：

Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

Answer 1

嗨，我得到相同的问题，我通过更改字段来解决问题。输入这样：

field.input = props =>(
                        <ImageInput {...props} accept="image/*" multiple={false} source={field.name}>
                            <ImageField source="src"/>
                        </ImageInput>
                    );

，也更改该行

if ('imageFile' === field.name) {

现在，我可以选择要从目录上传的文件，但是Post方法返回404错误，不知道如何与Vich解决该路径问题。希望Little Anwser可以提供帮助。