Question

我正在尝试使用在github上找到的模块进行反应。从本质上讲，该模块接收csv文件，并将其转换为json，真棒！但是，我正在尝试通过添加一些输入验证来对其进行一些改进。如果您上传除CSV以外的任何文件，则模块将对其进行处理，并且通常会失败（想象一下，尝试将jpeg文件的内容转换为json ....不太好笑）

我找到了发生文件输入的行，并尝试将其更改为仅接受csv文件。之所以能部分起作用，是因为当我转到该页面并被提示上传文件时，在资源管理器中搜索的默认文件扩展名为csv，而所有其他文件都被隐藏了。但是，尽管设置了accept ='.csv'

，我仍然可以上传自己选择的任何文件类型

我已附上以下代码。我想知道我还能采取什么措施来防止用户上传除csv以外的文件类型，我以为我可以通过更改输入类型的接受值来做到这一点，但我想没有。

import React from 'react'
import { render } from 'react-dom'
import CsvParse from '../../src'

class Demo extends React.Component {
  constructor() {
    super()

    this.state = {
      data: null,
      error: null,
    }
  }

  handleData = data => {
    this.setState({ data })
  }

  handleError = error => {
    this.setState({ error })
  }

  render() {
    const keys = [
      'Loc_num',
      'Toll Free Number',
      'Ring to Number',
      'Description',

    ]

    return (
      <div>
        <h1>Demo React Csv Parse</h1>

        <CsvParse
          keys={keys}
          onDataUploaded={this.handleData}
          onError={this.handleError}
          render={onChange => <input type="file" accept=".csv" onChange={onChange} />}
        />

        {this.state.data && (
          <pre>{JSON.stringify(this.state.data, null, 2)}</pre>
        )}

        {this.state.error && (
          <pre>{JSON.stringify(this.state.error, null, 2)}</pre>
        )}
      </div>
    )
  }
}

render(<Demo />, document.querySelector('#demo'))

对CSV上传进行反应输入验证

0 个答案: