Укажите размер файла формы начальной загрузки - PullRequest
Новая
       26

Укажите размер файла формы начальной загрузки

0 голосов
/ 27 сентября 2018

У меня есть форма: 

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

Я могу успешно принимать только файлы изображений.Я пытаюсь найти способ принимать только файлы изображений определенного размера , например, 50K.У меня есть Node Backend.Есть ли способ принимать только изображения определенного размера и указывать их с внешнего интерфейса?

Ответы [ 2 ]

0 голосов
/ 29 сентября 2018

В следующем ответе рассматривается интерфейсная часть вашего вопроса.См. https://stackoverflow.com/a/34698643/3105371 о внутреннем компоненте вашего вопроса.Возможно, вы захотите открыть другой вопрос, соответствующий вашим потребностям, на сервере.Если вы делаете, убедитесь, что вы включили информацию о вашей серверной среде.(expressjs, соответствующее промежуточное программное обеспечение и т. д.)

Рекомендация HTML 5.1 определяет интерфейс для ввода файлов.См на MDN.Глядя на таблицу совместимости в MDN, похоже, что это поддерживается современными браузерами.Обязательно проверьте перед проверкой изменения в производстве.

Введенный файл имеет атрибут files, равный FileList.FileList - это коллекция File объектов, предоставляющих свойство size - размер файла в байтах.

В следующем примере <CustomInput type="file" /> передается onChange propэто функция, которая проверяет размер файла.

Выполнить пример кода на 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>
    );
  }
}
0 голосов
/ 27 сентября 2018

Я бы решил эту проблему, проверив заголовок Content-Length в HTTP-запросе, который отправляется на ваш Node-сервер с изображением.Вы можете указать в интерфейсе, какой размер принимает ваш сервер, и проверить размер, когда пользователь отправляет изображение.Ваша проверка будет сравнивать количество байтов с ограничением размера, которое вы применяете.

...