指定 React Bootstrap 表单文件大小答案

【问题标题】：Specify React Bootstrap Form File Size指定 React Bootstrap 表单文件大小
【发布时间】：2019-03-03 17:09:03
【问题描述】：

我有一个表格：

<CustomInput onChange={this.handleUpload} label={this.state.picture.name} type="file" accept="image/*" />

我只能成功接受图像文件。我正在尝试找到一种仅接受 特定大小（例如 50K）的图像文件的方法。我有一个节点后端。有没有办法只接受特定大小的图像并从前端指定？

【问题讨论】：

标签： reactjs forms react-bootstrap reactstrap

【解决方案1】：

我将通过检查 HTTP 请求中的 Content-Length header 来解决这个问题，该请求与图像一起发送到您的节点服务器。您可以在前端指定服务器接受的大小，并在用户发送图像时检查大小。您的检查会将字节数与您强制执行的大小限制进行比较。

【讨论】：

嘿 nfadili，我如何在前端指定服务器接受的大小？至少，那会叫什么，以便我可以研究它？

【解决方案2】：

以下答案针对您问题的前端部分。请参阅https://stackoverflow.com/a/34698643/3105371 关于您问题的后端组件。您可能想针对您在服务器上的需求提出另一个问题。如果这样做，请确保包含有关服务器环境的信息。（expressjs、相关中间件等）

HTML 5.1 推荐定义了文件输入的接口。请参阅 MDN 上的 <input type="file">。查看 MDN 上的兼容性表，现代浏览器似乎支持此功能。请务必在将更改检查到生产环境之前进行测试。

文件输入具有files 属性，即FileList。 FileList 是 File 对象的集合，这些对象公开了 size 属性 — 文件大小（以字节为单位）。

在下面的示例中，<CustomInput type="file" /> 传递了一个 onChange 属性，这是一个验证文件大小的函数。

在https://stackblitz.com/edit/so-reactstrap-file-input?embed=1&file=Example.js运行代码示例

export default class Example extends Component {  
  state = {
    fileName: '',
    invalidFile: false,
  }
  handleFileChange = this.handleFileChange.bind(this);

  handleFileChange({target: {files}}) {
    const cancel = !files.length;
    if (cancel) return;

    const [{ size, name }] = files;
    const maxSize = 50000;

    if (size < maxSize) {
      this.setState({ fileName: name, invalidFile: false })
    } else {
      this.setState({ fileName: '', invalidFile: true })
    }
  }

  render() {
    const { fileName, invalidFile } = this.state;
    return (
      <FormGroup>
        <CustomInput
          type="file"
          id="exampleCustomFileBrowser"
          name="customFile"
          label={fileName || 'choose an image file'}
          onChange={this.handleFileChange}
          invalid={invalidFile} />
      </FormGroup>
    );
  }
}

【讨论】：