如何使用react-dropzone读取文件内容? [英] How can I read file content with react-dropzone?

问题描述

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

I'm trying to learn more about working with files for an upcoming project. Is there a way with react-dropzone that I can run a function when onDrop happens to change the contents of the files I'm uploading? For example, if I'm uploading a word doc that says "Hi everybody" how would I change the content to "Hi Dr. Nick"?

在尝试进行更改之前，我尝试过使用filereader api访问数据.我试过在异步函数的大括号后立即使用filereader，但无法使其正常工作.

I've tried just accessing the data by using the filereader api after before attempting to make the changes. I tried using filereader right after the opening curly bracket of the async function and wasn't able to get it to work.

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);

任何有关如何访问和修改文件内容的想法都将受到赞赏！谢谢.

Any thoughts on how to access and modify the contents of the file are greatly appreciated! Thanks.

推荐答案

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')中用于进行文件修改.

What you can do on frontend is to read file content and display it, all manipulations with file content should be done on server side. Push your file using ajax to your server with list of informations you want to change and use for example in nodeJS fs = require('fs')to make file modifications.

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

Also please visit this post i see that guys provided some solutions for your problem:

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

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

and here is a fidlle taken from above link: http://jsfiddle.net/o4rhg1xe/1/

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

In Summary, you can read text file content using code i have provided and then use method from link to create Blob object with content you want and such file can be downlaoded by browser, (see fiddle)

在我看来，文件修改仍应移至后端，并且我看不到有将它们放在前端的用例.

Still in my opinion file modifications shoudl be moved to back-end side, ans i cant see no usecase to make them on frontend side.

这篇关于如何使用react-dropzone读取文件内容?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！