Question

我有一个表格：

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

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

Answer 1

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

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

指定React Bootstrap表单文件大小

2 个答案: