Question

API平台文档中有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.

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方法返回404错误，不知道如何解决Vich的路径问题。希望小天使可以帮助您。

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

1 个答案:

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

1 个答案:

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