一站式1.0

one_stop_public/libs/ImgUploadCom.jsx

@@ -10,6 +10,17 @@ import {
 } from '@/webPublic/one_stop_public/2023yunshangguizhou/utils';
 import PhotoClip from './Split/PhotoClip/index';
 
+/**
+ * otherProps: {
+ *   limitMessage: '请上传xx格式图片图片', // 图片格式限制提示语句
+ *   photoClip: true, // 是否开启图片裁剪功能. 开启后需要引入对应的依赖js
+ *   accept: 'image/png, image/jpeg', // 图片格式限制
+ *   limitFileType: ['jpg', 'jpeg', 'png'], // 图片格式限制(上传时)
+ *   limitWidth: 1024, // 图片宽度限制 如果设置了 上传的图片必须和此宽度限制一致
+ *   limitHeight: 768, // 图片高度限制 如果设置了 上传的图片必须和此高度限制一致
+ * }
+ * */
+
 export default class ImgUploadCom extends React.Component {
   constructor(props) {
     super(props);
@@ -87,13 +98,18 @@ export default class ImgUploadCom extends React.Component {
 
 
   render() {
-    const { json, disabled, otherProps } = this.props;
-    console.log(otherProps);
+    const { json, disabled, otherProps, value } = this.props;
     const { url } = this.state;
-    // TODO 图片裁剪功能 如果开启了 直接更换为 裁剪组件 钟是志 2024年9月9日
-    //     {
-    //           otherProps.photoClip && <PhotoClip />
-    //     }
+    console.log('🚀 ~ file:ImgUploadCom method:render line:103 -----', otherProps, '');
+    if(!disabled && otherProps.photoClip){
+      return (
+        <PhotoClip json={json}
+                   value={value}
+                   triggerChange={this.triggerChange}
+                   otherProps={otherProps}
+        />
+      );
+    }
     return (
       <>
       <Upload.Dragger

one_stop_public/libs/Split/PhotoClip/importAll.js

@@ -15,9 +15,12 @@ function loadJs(src) {
   });
 }
 export default async function importDependence() {
-  await loadJs('/config/dependence/iscroll-zoom-min.js');
-  await loadJs('/config/dependence/hammer.min.js');
-  await loadJs('/config/dependence/lrz.all.bundle.js');
-  await loadJs('/config/dependence/PhotoClip.js');
+  const a = await loadJs('/config/dependence/iscroll-zoom-min.js');
+  const b = await loadJs('/config/dependence/hammer.min.js');
+  const c = await loadJs('/config/dependence/lrz.all.bundle.js');
+  const d = await loadJs('/config/dependence/PhotoClip.js');
+  if (a && b && c && d) {
     return new Promise((resolve, reject) => resolve(true));
+  }
+  return new Promise((resolve, reject) => resolve(false));
 }

one_stop_public/libs/Split/PhotoClip/index.js

 import React, { useState, useEffect, Fragment } from 'react';
 import styles from './index.less';
-import {
-  Button,
-  WingBlank,
-  WhiteSpace,
-  Toast,
-} from 'antd-mobile';
-import importDependence from '@/webPublic/one_stop_public/libs/Split/PhotoClip/importAll';
-// import { uploadFile, updatePhoto2 } from '../../../services/InformationSvc';
+import { Button, WingBlank, WhiteSpace, Toast } from 'antd-mobile';
+import importAll from './importAll';
+import { Modal } from 'antd';
+import { queryFileUrl } from '@/webPublic/one_stop_public/utils/queryConfig';
+import { uploadFile } from '@/webPublic/one_stop_public/libs/PictureSignature/ShowItem';
 let pc = null;
 
 const dataURLtoFile = (dataurl, filename) => {
@@ -24,17 +21,46 @@ const dataURLtoFile = (dataurl, filename) => {
   return new File([u8arr], filename, { type: mime });
 };
 
-export default function Index({}) {
+export default function Index({ value, otherProps, json, triggerChange }) {
   const [imgData, setData] = useState(null);
+  const [visible, setVisible] = useState(false);
 
   useEffect(() => {
-    importDependence().then((res) => {
+    if (!window.PhotoClip) {
+      importAll();
+    }
+
+    // 加载的图片必须要与本程序同源，否则无法截图
+    // pc.load('img/mm.jpg');
+  }, []);
+
+  function uploadImg() {
+    if (!imgData) {
+      Toast.info('请先上传图片,并拖动截取', 2);
+      return false;
+    }
+    let file = dataURLtoFile(imgData, '1.jpg'); // 将base64 图片转换成 file
+    console.log(file);
+    Toast.loading('正在上传', 2);
+    uploadFile(file).then((y) => {
+      if(y && typeof y === 'string' && y.length > 10){
+        triggerChange(y);
+        closeModal();
+      }
+    });
+  }
+
+  useEffect(() => {
+    if (visible) {
+      if (window.PhotoClip && !pc) {
         pc = new window.PhotoClip('#clipArea', {
           size: [200, 280],
           outputSize: [200, 280],
+          //adaptive: ['60%', '80%'],
           file: '#file',
           view: '#view',
           ok: '#clipBtn',
+          //img: 'img/mm.jpg',
           loadStart: function() {
             console.log('开始读取照片');
           },
@@ -48,34 +74,64 @@ export default function Index({}) {
             alert(msg);
           },
         });
-    })
-  }, []);
+      }
+    }
+  }, [visible]);
 
-  function uploadImg() {
-    if (!imgData) {
-      Toast.info('请先上传图片,并拖动截取', 2);
-      return false;
+  function handleAClick() {
+    // setData(null);
+    setVisible(true);
+    // pc && pc.destroy();
+    // pc = null;
   }
-    // let file = dataURLtoFile(imgData, '1'); // 将base64 图片转换成 file
-    // console.log(file);
-    // Toast.loading('正在上传', 2);
-    // uploadFile({ file }).then((y) => {
-    //   if (y && y.url) {
-    //     updatePhoto2({ photo2: y.url }).then((response) => {
-    //       if (response) {
-    //         Toast.info('修改头像成功', 2);
-    //         window.history.back(-1);
-    //       }
-    //     });
-    //   }
-    // });
+
+  function closeModal() {
+    setVisible(false);
   }
 
   return (
     <Fragment>
+      <a className={styles.handle} onClick={handleAClick}>
+        {!!value ? <img src={queryFileUrl(value)} /> : '点击上传'}
+      </a>
+      {
+        <Modal
+          visible={visible}
+          width={'95vw'}
+          forceRender={true}
+          onCancel={() => {
+            closeModal();
+          }}
+          style={{ top: 20 }}
+          destroyOnClose={false}
+          footer={null}
+          bodyStyle={{
+            minHeight: '60vh',
+            maxHeight: '90vh',
+            overflowY: 'auto',
+          }}
+        >
           <div className={styles.photo}>
             <div id='clipArea' style={{ height: '300px' }} />
+
             <div className={styles.photo2}>
+              <label htmlFor='file' className={styles.labelDom}>
+                <input
+                  type='button'
+                  id='btn'
+                  value='点我上传'
+                  className={styles.btn}
+                />
+                <span id='text' className={styles.text}>
+                  {otherProps.limitMessage || ''}
+                </span>
+                <input
+                  type='file'
+                  id='file'
+                  className={styles.file}
+                  accept={'image/*'}
+                />
+              </label>
               <Button
                 type='primary'
                 inline
@@ -86,11 +142,6 @@ export default function Index({}) {
                 截取
               </Button>
             </div>
-        <p style={{ color: 'red', padding: '20px' }}>
-          提示:
-          <br />
-          证件照上传要求：免冠正面照片，照片上正常应该看到人的两耳轮廓，照片尺寸可以为一寸或二寸，颜色可以为黑白或彩色。底色可为白色或蓝色.
-        </p>
             <div
               id='view'
               style={{
@@ -100,13 +151,21 @@ export default function Index({}) {
                 backgroundColor: '#666',
               }}
             />
-        <WingBlank style={{ marginTop: '20px', marginBottom: '20px' }}>
-          <Button type='warning' onClick={uploadImg}>
-            上传
+            <WingBlank style={{ marginTop: '20px',  }}>
+              <Button type='primary' onClick={uploadImg}>
+                保存
+              </Button>
+              <WhiteSpace />
+            </WingBlank>
+            <WingBlank style={{ marginBottom: '20px' }}>
+              <Button type='warning' onClick={closeModal}>
+                关闭
               </Button>
               <WhiteSpace />
             </WingBlank>
           </div>
+        </Modal>
+      }
     </Fragment>
   );
 }

one_stop_public/libs/Split/PhotoClip/index.less

 .photo{
   background-color: #FFFFFF;
-  width: 100vw;
+  width: 100%;
   height: 100vh;
   overflow-y: auto;
   .uploadDiv{
@@ -10,7 +10,7 @@
 .photo2{
   display: flex;
   flex-wrap: nowrap;
-  margin: 20px;
+  margin: 10px;
   justify-content: space-evenly;
 }
 
@@ -36,3 +36,7 @@
   align-items: center;
   margin-top: 10px;
 }
+.handle{
+  text-align: center;
+
+}

zyd_public/WangEditor/uploadFile.js

 import request from '@/utils/request';
-import config, { getUploadUrl } from '@/config/config';
+// import config, { getUploadUrl } from '@/config/config'; // 从学工配置文件获取上传地址
 import { getToken } from '@/utils/authority';
 import {
   getSassApiHeader,
   getSysCode
 } from '@/webPublic/one_stop_public/2023yunshangguizhou/utils';
+import { getIsBei_Dian } from '@/webPublic/zyd_public/utils/utils';
 
-const uploadUrl = getUploadUrl();
+export const uploadUrl = window.specialImportantSystemConfig?.uploadUrl || '';
 
 export default function uploadFile(params) {
 	return request(uploadUrl, {