问题描述
我正在尝试使用react admin和api平台创建我的管理站点。 一切正常,但是,我不知道为什么我上载文件时会收到带有响应201的自定义请求,但是第二个请求是第一个请求的响应。 有人可以告诉我我错了吗?
import React from "react";
import {ImageField,ImageInput,ReferenceInput,AutocompleteInput} from 'react-admin';
import {Redirect,Route} from "react-router-dom";
import RichTextInput from 'ra-input-rich-text';
import {
HydraAdmin,ResourceGuesser,InputGuesser,EditGuesser,CreateGuesser,hydraDataProvider as baseHydraDataProvider,fetchHydra as baseFetchHydra
} from "@api-platform/admin";
import parseHydraDocumentation from "@api-platform/api-doc-parser/lib/hydra/parseHydraDocumentation";
import authProvider from "./authProvider";
import ListGuesser from "@api-platform/admin/lib/ListGuesser";
import FieldGuesser from "@api-platform/admin/lib/FieldGuesser";
import ShowGuesser from "@api-platform/admin/lib/ShowGuesser";
const entrypoint = process.env.REACT_APP_API_ENTRYPOINT;
const fetchHeaders = {Authorization: `Bearer ${window.localStorage.getItem("admin_token")}`};
const fetchHydra = (url,options = {}) => baseFetchHydra(url,{
...options,headers: new Headers(fetchHeaders),});
const apiDocumentationParser = entrypoint => parseHydraDocumentation(entrypoint,{headers: new Headers(fetchHeaders)})
.then(
(({api}) => {
api.resources.map(resource => {
if ('http://schema.org/ImageObject' === resource.id) {
resource.fields.map(field => {
if ('file' === field.name) {
field.denormalizeData = value => ({
src: value
});
field.normalizeData = value => {
if (value && value.rawFile instanceof File) {
console.log("Instance file")
const body = new FormData();
body.append('file',value.rawFile);
return fetch(`${entrypoint}/game_images`,{
body,method: 'POST',headers: {
Authorization: `Bearer ${window.localStorage.getItem("admin_token")}`,}
})
.then(response => response.json());
}
return value.src;
};
}
return field;
});
}
return resource;
});
return {api};
}),(result) => {
switch (result.status) {
case 401:
return Promise.resolve({
api: result.api,customroutes: [
<Route path="/" render={() => {
return window.localStorage.getItem("admin_token") ? window.location.reload() :
<Redirect to="/login"/>
}}/>
],});
default:
return Promise.reject(result);
}
},);
const dataProvider = baseHydraDataProvider(entrypoint,fetchHydra,apiDocumentationParser);
const GameImageList = props => (
<ListGuesser {...props}>
<FieldGuesser source="filePath"/>
<FieldGuesser source="game"/>
</ListGuesser>
);
const GameShow = ( props) => (
<ShowGuesser {...props} >
<ImageField source="contentUrl" title="title"/>
</ShowGuesser>
)
const GameImageCreate = props => (
<CreateGuesser {...props}>
<ImageInput source="file" label="Related pictures" accept="image/*">
<ImageField source="src" title="title"/>
</ImageInput>
</CreateGuesser>
);
const GameImageUpdate = props => (
<CreateGuesser {...props}>
<ImageInput source="filePath" accept="image/*">
<ImageField source="src" title="title"/>
</ImageInput>
<InputGuesser source={"game"}/>
</CreateGuesser>
);
const GameCreate = props => (
<CreateGuesser {...props}>
<InputGuesser source={"name"}/>
<RichTextInput source={"text"}/>
<InputGuesser source={"rate"}/>
<ReferenceInput
source="gameImage"
reference="game_images"
>
<AutocompleteInput optionText="@id"/>
</ReferenceInput>
</CreateGuesser>
)
const GameEdit = props => (
<EditGuesser {...props}>
<InputGuesser source={"name"}/>
<RichTextInput source={"text"}/>
<InputGuesser source={"rate"}/>
<ReferenceInput
source="gameImage"
reference="game_images"
>
<AutocompleteInput optionText="@id"/>
</ReferenceInput>
</EditGuesser>
);
export default () => (
<HydraAdmin
dataProvider={dataProvider}
authProvider={authProvider}
entrypoint={entrypoint}
>
<ResourceGuesser name="users"/>
<ResourceGuesser name="games" edit={GameEdit} create={GameCreate}/>
<ResourceGuesser name="game_images" show={GameShow} list={GameImageList} create={GameImageCreate} edit={GameImageUpdate}/>
</HydraAdmin>
);
谢谢您的帮助!
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@)