javascript - 如何使用 react-dropzone 读取文件内容?
问题描述
我正在尝试了解有关为即将进行的项目处理文件的更多信息。react-dropzone 有没有一种方法可以在 onDrop 碰巧更改我正在上传的文件的内容时运行一个函数?例如,如果我要上传一个文字文档,上面写着“大家好”,我将如何将内容更改为“嗨尼克博士”?
在尝试进行更改之前,我尝试使用 filereader api 访问数据。我尝试在 async 函数的左大括号之后立即使用 filereader,但无法使其正常工作。
import React from 'react';
import Dropzone from 'react-dropzone';
import { graphql } from 'react-apollo';
import gql from 'graphql-tag';
const FileUpload = ({
children, disableClick, channelId, mutate, style = {},
}) => (
<Dropzone
style={style}
className="ignore"
onDrop={async ([file]) => {
const response = await mutate({
variables: {
channelId,
file,
},
});
console.log(response);
}}
disableClick={disableClick}
>
{children}
</Dropzone>
);
const createFileMessageMutation = gql`
mutation($channelId: Int!, $file: File) {
createMessage(channelId: $channelId, file: $file)
}
`;
export default graphql(createFileMessageMutation)(FileUpload);
非常感谢您对如何访问和修改文件内容的任何想法!谢谢。
解决方案
onDrop={async ([file]) => {
var reader = new FileReader();
reader.onload = function(e) {
var contents = e.target.result;
displayContents(contents);
};
reader.readAsText(file);
}}
你可以在前端做的是读取文件内容并显示它,所有对文件内容的操作都应该在服务器端完成。使用 ajax 将您的文件推送到您的服务器,其中包含您想要更改和使用的信息列表,例如在 nodeJSfs = require('fs')
中进行文件修改。
另请访问此帖子,我看到人们为您的问题提供了一些解决方案:
这是从上面的链接中取出的小提琴:http: //jsfiddle.net/o4rhg1xe/1/
总之,您可以使用我提供的代码读取文本文件内容,然后使用链接中的方法创建具有您想要的内容的 Blob 对象,并且可以通过浏览器下载此类文件,(参见小提琴)
仍然在我看来,文件修改应该移到后端,因为我看不到任何用例可以在前端制作它们。
推荐阅读
- python - TypeError:将对象转换为数字时未调整大小的对象的 len()
- ios - 从命令行调用 iOS 静态库中的函数
- javascript - 1 组件 2 有条件返回。如何渲染一个集合的孩子?
- xml - 使用 Spark 将 XML 读入数据框
- python - 使用 os.walk 在 python 中修改文件
- inheritance - 需要帮助来理解继承。我必须使用哪种继承?
- docker - “cAdvisor”不允许删除其他容器
- html - 扩展 selectpicker 引导类的列大小?
- javascript - 在 Javascript 中使用视图模型
- c# - Azure 数据库管理权限