[JavaScript知识库]react antd上传文件限制必填、只允许上传一个文件、删除提示、限制文件小于50M

上整体代码

import {  Form, Upload } from 'dtd';
import { UploadOutlined } from '@dtfe/icons';
let props = {
      accept: '.zip',
      action: '/reportReview/api/v1/jianzai/file/upload',
      data: { taskNumber, industryCode },
      headers: {},
      maxCount: 1,
      // 删除
      onRemove: (file) => {
        this.setState((state) => {
          const index = state.fileList.indexOf(file);
          let newFileList = state.fileList.slice();
          newFileList.splice(index - 1, 1);
          return {
            fileList: newFileList,
            fileName: [],
          };
        });
      },
      //文件上传之前的操作
      beforeUpload: (file) => {
        // 设置上传文件大小小于50M
        const isLt50M = file.size / 1024 / 1024 < 50;
        if (!this.state.fileList.length) {
          if (!isLt50M) {
            message.error('文件不允许超过50M！');
          } else {
            this.setState((state) => ({
              fileName: file.name,
              fileList: [...state.fileList, file],
            }));
          }
        } else {
          message.error('只能上传一个文件');
          this.setState((state) => ({
            fileName: file.name,
            fileList: [...state.fileList],
          }));
          return false;
        }
      },
    };
return (
<div>
<Form {...layout} name="control-hooks" ref={this.formRef}>
 <Form.Item
                name="qualityReport"
                label="行业质量报告"
                rules={[
                  { required: true, message: '' },
                  () => ({
                    validator(rule, value) {
                      if (!value || value.file.status === 'removed') {
                        return Promise.reject('请选择行业质量报告!');
                      }
                      return Promise.resolve();
                    },
                  }),
                ]}
                tooltip={{ title: '请上传.zip格式文件' }}
              >
                <Upload {...props} fileList={this.state.fileList}>
                  <Button>
                    <UploadOutlined /> 上传
                  </Button>
                </Upload>
              </Form.Item>
              </Form>
</div>)

上传文件限制必填、删除提示
如果是像input、select之类的样式组件，删除之后对应参数值为undefined，直接限制必填就可以，upload样式删除之后，对应参数依旧有内容，这是file.status变成removed，需要再次限制

 rules={[
     { required: true, message: '' },
      () => ({
                validator(rule, value) {
                if (!value || value.file.status === 'removed') {
                     return Promise.reject('请选择行业质量报告!');
                }
                return Promise.resolve();
               },
            }),
          ]}

限制文件小于50M
beforeUpload是upload自定义组件内置方法，文件上传之前的操作

//文件上传之前的操作
      beforeUpload: (file) => {
        // 设置上传文件大小小于50M
        const isLt50M = file.size / 1024 / 1024 < 50;
        if (!this.state.fileList.length) {
          if (!isLt50M) {
            message.error('文件不允许超过50M！');
          } else {
            this.setState((state) => ({
              fileName: file.name,
              fileList: [...state.fileList, file],
            }));
            return false;
          }
        } else {
          message.error('只能上传一个文件');
          this.setState((state) => ({
            fileName: file.name,
            fileList: [...state.fileList],
          }));
          return false;
        }
      },

开发者涨薪指南

48位大咖的思考法则、工作方式、逻辑体系