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

【问题标题】：Upload file with the Admin Component of API Platform not working使用 API 平台的管理组件上传文件不起作用
【发布时间】：2019-11-11 23:18:19
【问题描述】：

在 API Platform Docs 中有一部分 Handling File Uploads。 VichUploaderBundle 的代码按预期工作。但在有关管理组件Managing Files and Images 的文档中更进一步，它不起作用。至少创建和编辑表单没有出现。我知道我必须稍微调整代码以使其与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.

【问题讨论】：

标签： reactjs react-admin api-platform.com

【解决方案1】：

您遇到同样的问题，我通过更改 field.input 解决了这个问题：

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

还要改变那行

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

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

【讨论】：