ant-design/components/upload/demo/upload-png-only.md
MadCcc 6776bb8916
docs: demo support react18 (#34843)
* docs: update demo

* chore: add script

* test: fix demo test

* docs: convert demos

* chore: move script

* test: remove react-dom import

* chore: update deps

* docs: update riddle js

* test: fix image test

* docs: fix riddle demo
2022-04-03 23:27:45 +08:00

1.2 KiB

order title
7.1
zh-CN en-US
只上传 png 图片 Upload png file only

zh-CN

beforeUpload 返回 falsePromise.reject 时,只用于拦截上传行为,不会阻止文件进入上传列表(原因)。如果需要阻止列表展现,可以通过返回 Upload.LIST_IGNORE 实现。

en-US

beforeUpload only prevent upload behavior when return false or reject promise, the prevented file would still show in file list. Here is the example you can keep prevented files out of list by return UPLOAD.LIST_IGNORE.

import React, { useState } from 'react';
import { Upload, Button, message } from 'antd';
import { UploadOutlined } from '@ant-design/icons';

const Uploader = () => {
  const props = {
    beforeUpload: file => {
      const isPNG = file.type === 'image/png';
      if (!isPNG) {
        message.error(`${file.name} is not a png file`);
      }
      return isPNG || Upload.LIST_IGNORE;
    },
    onChange: info => {
      console.log(info.fileList);
    },
  };
  return (
    <Upload {...props}>
      <Button icon={<UploadOutlined />}>Upload png only</Button>
    </Upload>
  );
};

export default () => <Uploader />;