如何使用react-dropzone读取文件内容？

Question

我正在尝试了解有关为即将到来的项目使用文件的更多信息。 当onDrop碰巧更改要上传的文件的内容时，react-dropzone是否可以运行函数？ 例如，如果我上载一个单词文档，说“嗨，大家好”，我如何将内容更改为“嗨，尼克博士”？

在尝试进行更改之前，我尝试过使用filereader api访问数据。 我尝试在异步函数的大括号后立即使用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);

非常感谢您对如何访问和修改文件内容的任何想法！ 谢谢。

Answer 1

onDrop={async ([file]) => {
  var reader = new FileReader();
  reader.onload = function(e) {
    var contents = e.target.result;
    displayContents(contents);
  };
  reader.readAsText(file);
}}

您可以在前端执行的操作是读取并显示文件内容，所有与文件内容有关的操作都应在服务器端进行。 使用ajax将文件与要更改的信息列表一起推送到服务器，并在例如nodeJS中使用fs = require('fs')进行文件修改。

另外，请访问这篇文章，我看到人们为您的问题提供了一些解决方案：

是否可以仅使用JavaScript将数据写入文件？

这是从上面的链接中提取的一个文件： http : //jsfiddle.net/o4rhg1xe/1/

在摘要中，您可以使用我提供的代码读取文本文件的内容，然后使用链接中的方法创建具有所需内容的Blob对象，并且此类文件可以由浏览器下载（请参见小提琴）

我仍然认为文件修改应该移到后端，并且我看不到要在前端进行使用的用例。