使用 API 平台的管理组件上传文件无效

Question

在 API 平台文档中有一部分 Handling File Uploads. The code with VichUploaderBundle works like expected. But further in the Docs regarding the Admin Component Managing Files and Images doesn't work. At least the create and edit forms doesn't show up. I know that i had to adjust the code a little bit to make it work with the code in Handling File Uploads 但它仍然没有给我预期的结果。

我已经相应地修改了 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 解决了这个问题：

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

并更改该行

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

现在我可以从我的目录中选择要上传的文件，但是 Post 方法 return 404 错误，不知道如何解决 Vich 的路径问题。希望小回答能帮到你

使用 API 平台的管理组件上传文件无效

Upload file with the Admin Component of API Platform not working

reactjs

api-platform.com

react-admin