附件上传组件增加对图片大小的限制

one_stop_public/libs/UploadCom.js

-import React from "react";
-import {Button, Icon, message, Modal, Upload} from "antd";
-import {queryApiActionPath} from "../utils/queryConfig";
-import config from "@/webPublic/one_stop_public/config";
-import styles from "./style.less";
-import UploadComDiyForQnZy from "@/webPublic/one_stop_public/libs/UploadComDiyForQnZy";
+import React from 'react';
+import { Button, Icon, message, Modal, Upload } from 'antd';
+import { queryApiActionPath } from '../utils/queryConfig';
+import config from '@/webPublic/one_stop_public/config';
+import styles from './style.less';
+import UploadComDiyForQnZy from '@/webPublic/one_stop_public/libs/UploadComDiyForQnZy';
 
 export function checkIsImage(path) {
   if (!path) {
     return false;
   }
   let p = path.toLowerCase();
-  let find = ['.jpg', '.png', '.jpeg', '.bmp', '.gif', '.bmp', '.svg'].find((x) => {
+  let find = ['.jpg', '.png', '.jpeg', '.bmp', '.gif', '.bmp', '.svg'].find(x => {
     return path.indexOf(x) > -1;
   });
   return !!find;
 }
 
-
 export default function index(props) {
-  if (window.location.href.indexOf("jy/geren/subsidy") > -1) {
-    return (<UploadComDiyForQnZy {...props} />);
+  if (window.location.href.indexOf('jy/geren/subsidy') > -1) {
+    return <UploadComDiyForQnZy {...props} />;
   } else {
     return <UploadCom {...props} />;
   }
@@ -32,21 +31,20 @@ class UploadCom extends React.Component {
     this.state = {
       files: value.files,
       previewVisible: false,
-      previewImage: "",
+      previewImage: '',
     };
+    this.otherProps = {};
     console.log(props);
     if (props.json?.otherProps) {
       this.otherProps = props.json?.otherProps;
       try {
-        this.otherProps = new Function(this.otherProps);
+        this.otherProps = new Function(this.otherProps)();
         console.log(this.otherProps);
-      } catch (e) {
-
-      }
+      } catch (e) {}
     }
   }
 
-  triggerChange = (changedValue) => {
+  triggerChange = changedValue => {
     // Should provide an event to pass value to Form.
     const onChange = this.props.onChange;
     if (onChange) {
@@ -54,28 +52,61 @@ class UploadCom extends React.Component {
     }
   };
 
+  //图片上传之前进行判断
+  beforeUpload = file => {
+    return this.isSize(file).then(res => {
+      message.info('正在上传中,请等待');
+      return true;
+    });
+  };
+
+  //检测尺寸
+  isSize = file => {
+    const { limitWarnningMessage } = this.otherProps;
+    return new Promise((resolve, reject) => {
+      let { width, height } = this.otherProps.limitImageSize;
+      let _URL = window.URL || window.webkitURL;
+      let img = new Image();
+      img.onload = function() {
+        let valid = img.width >= width && img.height >= height;
+        valid ? resolve() : reject();
+      };
+      img.src = _URL.createObjectURL(file);
+    }).then(
+      () => {
+        return file;
+      },
+      () => {
+        message.error(
+          file.name + limitWarnningMessage,
+        );
+        return Promise.reject();
+      },
+    );
+  };
+
   componentWillReceiveProps(nextProps) {
     // Should be a controlled component.
-    if ("value" in nextProps) {
+    if ('value' in nextProps) {
       const value = nextProps.value;
       this.setState(value);
     }
   }
 
-  changeUrl = (info) => {
-    if (info.file.status === "done") {
+  changeUrl = info => {
+    if (info.file.status === 'done') {
       message.success(`${info.file.name} 上传成功`);
       const files = this.state.files;
-      files.push({path: info.file.response, name: info.file.name});
-      if (!("value" in this.props)) {
-        this.setState({files});
+      files.push({ path: info.file.response, name: info.file.name });
+      if (!('value' in this.props)) {
+        this.setState({ files });
       }
-      this.triggerChange({files});
-    } else if (info.file.status === "error") {
+      this.triggerChange({ files });
+    } else if (info.file.status === 'error') {
       message.error(`${info.file.name} 上传失败`);
     }
   };
-  remove = (path) => {
+  remove = path => {
     const files = this.state.files;
     for (var i = 0; i < files.length; i++) {
       if (files[i].path == path) {
@@ -83,42 +114,43 @@ class UploadCom extends React.Component {
         break;
       }
     }
-    if (!("value" in this.props)) {
-      this.setState({files});
+    if (!('value' in this.props)) {
+      this.setState({ files });
     }
-    this.triggerChange({files});
+    this.triggerChange({ files });
   };
 
   render() {
-    const {files, previewVisible, previewImage} = this.state;
-    const {isMultiple, accept, btnName, disabled} = this.props;
+    const { files, previewVisible, previewImage } = this.state;
+    const { isMultiple, accept, btnName, disabled } = this.props;
     const props = {
-      name: "file",
+      name: 'file',
       multiple: isMultiple,
       accept: accept,
       action: config.uploadUrl,
       showUploadList: false,
-      onChange: this.changeUrl
+      onChange: this.changeUrl,
+      beforeUpload: this.otherProps?.limitImageSize ? this.beforeUpload : undefined,
     };
     return (
       <div>
-        {" "}
+        {' '}
         <Upload {...props} disabled={disabled}>
           {!disabled && (
             <Button>
-              <Icon type="upload"/>
-              {btnName ? btnName : "上传附件"}
+              <Icon type="upload" />
+              {btnName ? btnName : '上传附件'}
             </Button>
           )}
         </Upload>
-        <ul style={{paddingLeft: 8, display: "flex"}}>
-          {(files || []).map((f) => {
+        <ul style={{ paddingLeft: 8, display: 'flex' }}>
+          {(files || []).map(f => {
             if (f.path && checkIsImage(f.path)) {
               return (
                 <li key={f.path} className={styles.preview_img}>
                   <div className={styles.preview_div}>
                     <img
-                      style={{width: '100px', height: 'auto'}}
+                      style={{ width: '100px', height: 'auto' }}
                       className={styles.img}
                       src={queryApiActionPath() + f.path}
                     />
@@ -128,15 +160,16 @@ class UploadCom extends React.Component {
                         // window.open(queryApiActionPath() + f.path);
                         this.setState({
                           previewVisible: true,
-                          previewImage: queryApiActionPath() + f.path
+                          previewImage: queryApiActionPath() + f.path,
                         });
-                      }}>
-                      <Icon type="eye" className={styles.icon_eye}/>
+                      }}
+                    >
+                      <Icon type="eye" className={styles.icon_eye} />
                     </div>
                   </div>
                   {!disabled && (
                     <Icon
-                      style={{marginLeft: 10}}
+                      style={{ marginLeft: 10 }}
                       type="delete"
                       onClick={this.remove.bind(this, f.path)}
                     />
@@ -148,10 +181,10 @@ class UploadCom extends React.Component {
               <li key={f.path}>
                 <a target="_blank" key={f.path} href={queryApiActionPath() + f.path}>
                   {f.name}
-                </a>{" "}
+                </a>{' '}
                 {!disabled && (
                   <Icon
-                    style={{marginLeft: 10}}
+                    style={{ marginLeft: 10 }}
                     type="delete"
                     onClick={this.remove.bind(this, f.path)}
                   />
@@ -163,10 +196,10 @@ class UploadCom extends React.Component {
         <Modal
           visible={previewVisible}
           footer={null}
-          onCancel={() => this.setState({previewVisible: false})}
+          onCancel={() => this.setState({ previewVisible: false })}
           width={'90vw'}
         >
-          <img alt="example" style={{width: "100%", height: 'auto'}} src={previewImage}/>
+          <img alt="example" style={{ width: '100%', height: 'auto' }} src={previewImage} />
         </Modal>
       </div>
     );

one_stop_public/libs/UploadComDiyForQnZy.js

@@ -102,7 +102,7 @@ export default class UploadComDiyForQnZy extends React.Component {
       action: config.uploadUrl,
       showUploadList: false,
       onChange: this.changeUrl,
-      beforeUpload: this.beforeUpload
+      beforeUpload: this.beforeUpload,
     };
 
     return (