在 React 中上传文件时如何编写验证答案

【问题标题】：How to write Validations while uploading file in React在 React 中上传文件时如何编写验证
【发布时间】：2021-08-10 13:17:34
【问题描述】：

我正在使用 React，我正在尝试上传一个文件，该文件类型应该只是 png。当我上传 png 文件时，它工作正常。但我需要停止上传其他类型的文件。例如，如果我需要上传 png 文件意味着它需要正常工作。如果我错误地上传音频文件意味着该文件不应该被上传。请告诉我如何编写这样的验证。

这是我的代码这是 App.js

import React, { useState } from "react";
import 'antd/dist/antd.css';
import './index.css';
import { Row, Col, Button, Modal, Upload, message } from 'antd';
import { VideoCameraOutlined, AudioOutlined } from '@ant-design/icons';
import "./App.css";

const App = () => {
  const props = {
    beforeUpload: file => {
      const audioValidation = file.type === "image/png"
      if (!audioValidation) {
        message.error('You can only upload PNG file!');
      }
    }
  }
  const [visible, setVisible] = useState(false)

  const showPopUp = () => {
    setVisible(true)
  }
  return (
    <div>
      <Row>
        <Col span={24}>
          <Button onClick={() => showPopUp()} type="primary">Show PopUp</Button>
          <Modal
            visible={visible}
          >
            <Upload {...props}>
              <div style={{ display: "flex" }}>
                <div>
                  <VideoCameraOutlined style={{ fontSize: "25px", backgroundColor: "red", padding: "10px", borderRadius: "50%" }} />
                  <h6>Upload Video</h6>
                </div>
                <div style={{ marginLeft: "5px" }}>
                  <AudioOutlined style={{ fontSize: "25px", backgroundColor: "red", padding: "10px", borderRadius: "50%" }} />
                  <h6>Upload Png</h6>
                </div>
              </div>
            </Upload>
          </Modal>
        </Col>
      </Row>
    </div>
  )
}

export default App

如果您有任何问题，请告诉我，谢谢。

【问题讨论】：

您已经在检查文件类型。那有什么问题呢？
@Alen.Toma 问题在于文件提示实际上并没有限制用户提交扩展名不同于.png 的文件。

标签： reactjs antd

【解决方案1】：

在 Antd 文档中，他们告诉您可以使用“接受”属性来选择最终用户要选择的格式，这样您就不必验证任何内容，因为它只允许您选择文件类型。基本上作为普通输入。

Antd Documentation Here

【讨论】：

【解决方案2】：

来自 <input> 上的 MDN 文档页面：

accept 属性值是一个字符串，用于定义文件输入应接受的文件类型。此字符串是以逗号分隔的唯一文件类型说明符列表。因为给定的文件类型可能以多种方式标识，所以当您需要给定格式的文件时，提供一组完整的类型说明符很有用。

我们可以指定一个输入应该只接受.png 文件：

<input type="file" accept=".png">

但是，您似乎正在使用Ant Design，而且看起来<Upload> 组件实际上并没有内置方法来为<input> 元素提供可接受的文件类型。也许这是您可以使用上述信息解决的问题。

【讨论】：

【解决方案3】：

好的，我阅读了 github 上的代码，这是你应该做的。

  beforeUpload: file => {
     const audioValidation = file.type === "image/png"
     return new Promise((resolve, reject) => {
      if (!audioValidation) {
        reject(null) // the file is not ok then abort
        message.error('You can only upload PNG file!');
        }else resolve(file) // the file is ok, so you should proceed.
      }
    }

【讨论】：

嗨@Alen.Toma，我试过你的代码它不起作用