admin-on-rest - 反应管理员 | 无法使用 FileInput 上传文件
问题描述
第一次使用React-Admin。我正在使用它来创建一个面板,该面板基本上监控我从 API 获得的一些参数。但是,有一部分需要上传 .csv 文件。我正在尝试使用FileInput实现它,但我无法捕获该文件。我不明白该怎么做。
文件选择步骤(从电脑到浏览器)工作正常,但我的问题是在该步骤之后我无法处理文件。我阅读了文档,但我不知道该怎么做。我尝试了很多不同的方法,但我快疯了。
下面是基本代码。我想我必须添加一个处理程序或类似的东西,但是,如何?我对 React 也没有什么经验。我知道基础知识,但我只是构建了几个(超级)简单的应用程序。只是为了学习。
// UploadFile.js
...
export const UploadSection = props => (
<SimpleForm>
<FileInput source="csvFile" label="Upload file (.csv)" accept="text/csv" >
<FileField source="src" title="title" />
</FileInput>
</SimpleForm>
);
// App.js
...
const App = () => (
<Admin dataProvider={dataProvider} authProvider={authProvider} >
...
<Resource name="uploadSection" list={UploadSection} />
...
</Admin>
);
问题:
- 如何捕获 .csv 文件?
提前致谢!
解决方案
在几个小时的工作后,我得到了它的工作。
第一个问题(我评论了@selens 的答案):我得到了Uncaught TypeError: _this.props.save is not a function
因为我没有在创建或编辑视图中工作。看来您需要在创建或编辑视图中使用 FileInput。如果没有,保存按钮将不起作用。
来自文档:
save:提交表单时调用的函数。当在 Create 和 Edit 组件中使用表单组件时,react-admin 会自动传递。
第二个问题:就我而言,我一次上传一个文件(FileInput 中的multiple={false})。但是,该代码addUploadFeature.js
已准备好与多个文件一起使用。因此,我编辑了部分内容addUploadFeature.js
以仅上传一个文件。请参阅下面的完整文件。
// addUploadFeature.js
const convertFileToBase64 = file => new Promise((resolve, reject) => {
const reader = new FileReader();
reader.readAsDataURL(file.rawFile);
reader.onload = () => resolve(reader.result);
reader.onerror = reject;
});
const addUploadFeature = requestHandler => (type, resource, params) => {
if (type === 'UPDATE' && resource === 'myResource') {
if (params.data.myFile) {
// NEW CODE HERE (to upload just one file):
const myFile = params.data.myFile;
if ( !myFile.rawFile instanceof File ){
return Promise.reject('Error: Not a file...'); // Didn't test this...
}
return Promise.resolve( convertFileToBase64(myFile) )
.then( (picture64) => ({
src: picture64,
title: `${myFile.title}`
}))
.then( transformedMyFile => requestHandler(type, resource, {
...params,
data: {
...params.data,
myFile: transformedMyFile
}
}));
}
}
return requestHandler(type, resource, params);
};
export default addUploadFeature;
毕竟,我能够以 Base64 格式将文件发送到服务器。
希望这对将来的某人有用;)
推荐阅读
- windows - vmware 工作站 15 播放器:设备/凭据保护不兼容问题甚至禁用它
- asp.net - 如何提高 ASP.NET Web 应用程序开发的效率?
- spring-integration - 如何使用 Zookeeper 和 Spring 集成负载平衡领导者
- read-the-docs - 如何在 Mac OS X 上本地测试 github repo mkdocs 构建的文件?
- c# - ServiceStack.Text model.ToCsv() 没有将输出属性用引号括起来
- hosting - 通过 BitBucket Pipelines 通过 TLS 进行 FTP
- android - 使用 AES 端到端的文本消息加密
- r - 出现在多行中的匹配对
- php - 如何从图像加密中获取图像文件名
- nativescript - Nativescript 删除一个类