Skip to content

W
WebPublic
提交 66bbcd8f authored 作者: 钟是志's avatar 钟是志
浏览文件
操作

一站式1.0

增加图片裁剪移动端组件 解决延职 学生更新头像
上级 058a8802
隐藏空白字符变更
内嵌 并排
正在显示 包含 174 行增加 和 91 行删除
one_stop_public/libs/ImgUploadCom.jsx
浏览文件 @ 66bbcd8f
...@@ -10,6 +10,17 @@ import { ...@@ -10,6 +10,17 @@ import {
} from '@/webPublic/one_stop_public/2023yunshangguizhou/utils'; } from '@/webPublic/one_stop_public/2023yunshangguizhou/utils';
import PhotoClip from './Split/PhotoClip/index'; 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 { export default class ImgUploadCom extends React.Component {
constructor(props) { constructor(props) {
super(props); super(props);
...@@ -87,13 +98,18 @@ export default class ImgUploadCom extends React.Component { ...@@ -87,13 +98,18 @@ export default class ImgUploadCom extends React.Component {
render() { render() {
const { json, disabled, otherProps } = this.props; const { json, disabled, otherProps, value } = this.props;
console.log(otherProps);
const { url } = this.state; const { url } = this.state;
// TODO 图片裁剪功能 如果开启了 直接更换为 裁剪组件 钟是志 2024年9月9日 console.log('🚀 ~ file:ImgUploadCom method:render line:103 -----', otherProps, '');
// { if(!disabled && otherProps.photoClip){
// otherProps.photoClip && <PhotoClip /> return (
// } <PhotoClip json={json}
value={value}
triggerChange={this.triggerChange}
otherProps={otherProps}
/>
);
}
return ( return (
<> <>
<Upload.Dragger <Upload.Dragger
......
one_stop_public/libs/Split/PhotoClip/importAll.js
浏览文件 @ 66bbcd8f
...@@ -15,9 +15,12 @@ function loadJs(src) { ...@@ -15,9 +15,12 @@ function loadJs(src) {
}); });
} }
export default async function importDependence() { export default async function importDependence() {
await loadJs('/config/dependence/iscroll-zoom-min.js'); const a = await loadJs('/config/dependence/iscroll-zoom-min.js');
await loadJs('/config/dependence/hammer.min.js'); const b = await loadJs('/config/dependence/hammer.min.js');
await loadJs('/config/dependence/lrz.all.bundle.js'); const c = await loadJs('/config/dependence/lrz.all.bundle.js');
await loadJs('/config/dependence/PhotoClip.js'); const d = await loadJs('/config/dependence/PhotoClip.js');
return new Promise((resolve, reject) => resolve(true)); 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
浏览文件 @ 66bbcd8f
import React, { useState, useEffect, Fragment } from 'react'; import React, { useState, useEffect, Fragment } from 'react';
import styles from './index.less'; import styles from './index.less';
import { import { Button, WingBlank, WhiteSpace, Toast } from 'antd-mobile';
Button, import importAll from './importAll';
WingBlank, import { Modal } from 'antd';
WhiteSpace, import { queryFileUrl } from '@/webPublic/one_stop_public/utils/queryConfig';
Toast, import { uploadFile } from '@/webPublic/one_stop_public/libs/PictureSignature/ShowItem';
} from 'antd-mobile';
import importDependence from '@/webPublic/one_stop_public/libs/Split/PhotoClip/importAll';
// import { uploadFile, updatePhoto2 } from '../../../services/InformationSvc';
let pc = null; let pc = null;
const dataURLtoFile = (dataurl, filename) => { const dataURLtoFile = (dataurl, filename) => {
...@@ -24,31 +21,17 @@ const dataURLtoFile = (dataurl, filename) => { ...@@ -24,31 +21,17 @@ const dataURLtoFile = (dataurl, filename) => {
return new File([u8arr], filename, { type: mime }); 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 [imgData, setData] = useState(null);
const [visible, setVisible] = useState(false);
useEffect(() => { useEffect(() => {
importDependence().then((res) => { if (!window.PhotoClip) {
pc = new window.PhotoClip('#clipArea', { importAll();
size: [200, 280], }
outputSize: [200, 280],
file: '#file', // 加载的图片必须要与本程序同源，否则无法截图
view: '#view', // pc.load('img/mm.jpg');
ok: '#clipBtn',
loadStart: function() {
console.log('开始读取照片');
},
loadComplete: function() {
console.log('照片读取完成');
},
done: function(dataURL) {
setData(dataURL);
},
fail: function(msg) {
alert(msg);
},
});
})
}, []); }, []);
function uploadImg() { function uploadImg() {
...@@ -56,57 +39,133 @@ export default function Index({}) { ...@@ -56,57 +39,133 @@ export default function Index({}) {
Toast.info('请先上传图片,并拖动截取', 2); Toast.info('请先上传图片,并拖动截取', 2);
return false; return false;
} }
// let file = dataURLtoFile(imgData, '1'); // 将base64 图片转换成 file let file = dataURLtoFile(imgData, '1.jpg'); // 将base64 图片转换成 file
// console.log(file); console.log(file);
// Toast.loading('正在上传', 2); Toast.loading('正在上传', 2);
// uploadFile({ file }).then((y) => { uploadFile(file).then((y) => {
// if (y && y.url) { if(y && typeof y === 'string' && y.length > 10){
// updatePhoto2({ photo2: y.url }).then((response) => { triggerChange(y);
// if (response) { closeModal();
// Toast.info('修改头像成功', 2); }
// window.history.back(-1); });
// } }
// });
// } 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('开始读取照片');
},
loadComplete: function() {
console.log('照片读取完成');
},
done: function(dataURL) {
setData(dataURL);
},
fail: function(msg) {
alert(msg);
},
});
}
}
}, [visible]);
function handleAClick() {
// setData(null);
setVisible(true);
// pc && pc.destroy();
// pc = null;
}
function closeModal() {
setVisible(false);
} }
return ( return (
<Fragment> <Fragment>
<div className={styles.photo}> <a className={styles.handle} onClick={handleAClick}>
<div id='clipArea' style={{ height: '300px' }} /> {!!value ? <img src={queryFileUrl(value)} /> : '点击上传'}
<div className={styles.photo2}> </a>
<Button {
type='primary' <Modal
inline visible={visible}
size='small' width={'95vw'}
id='clipBtn' forceRender={true}
style={{ marginLeft: '20px' }} onCancel={() => {
> closeModal();
截取
</Button>
</div>
<p style={{ color: 'red', padding: '20px' }}>
提示:
<br />
证件照上传要求：免冠正面照片，照片上正常应该看到人的两耳轮廓，照片尺寸可以为一寸或二寸，颜色可以为黑白或彩色。底色可为白色或蓝色.
</p>
<div
id='view'
style={{
margin: '0 auto',
width: '200px',
height: '280px',
backgroundColor: '#666',
}} }}
/> style={{ top: 20 }}
<WingBlank style={{ marginTop: '20px', marginBottom: '20px' }}> destroyOnClose={false}
<Button type='warning' onClick={uploadImg}> footer={null}
上传 bodyStyle={{
</Button> minHeight: '60vh',
<WhiteSpace /> maxHeight: '90vh',
</WingBlank> overflowY: 'auto',
</div> }}
>
<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
size='small'
id='clipBtn'
style={{ marginLeft: '20px' }}
>
截取
</Button>
</div>
<div
id='view'
style={{
margin: '0 auto',
width: '200px',
height: '280px',
backgroundColor: '#666',
}}
/>
<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> </Fragment>
); );
} }
one_stop_public/libs/Split/PhotoClip/index.less
浏览文件 @ 66bbcd8f
.photo{ .photo{
background-color: #FFFFFF; background-color: #FFFFFF;
width: 100vw; width: 100%;
height: 100vh; height: 100vh;
overflow-y: auto; overflow-y: auto;
.uploadDiv{ .uploadDiv{
...@@ -10,7 +10,7 @@ ...@@ -10,7 +10,7 @@
.photo2{ .photo2{
display: flex; display: flex;
flex-wrap: nowrap; flex-wrap: nowrap;
margin: 20px; margin: 10px;
justify-content: space-evenly; justify-content: space-evenly;
} }
...@@ -36,3 +36,7 @@ ...@@ -36,3 +36,7 @@
align-items: center; align-items: center;
margin-top: 10px; margin-top: 10px;
} }
.handle{
text-align: center;
}
zyd_public/WangEditor/uploadFile.js
浏览文件 @ 66bbcd8f
import request from '@/utils/request'; import request from '@/utils/request';
import config, { getUploadUrl } from '@/config/config'; // import config, { getUploadUrl } from '@/config/config'; // 从学工配置文件获取上传地址
import { getToken } from '@/utils/authority'; import { getToken } from '@/utils/authority';
import { import {
getSassApiHeader, getSassApiHeader,
getSysCode getSysCode
} from '@/webPublic/one_stop_public/2023yunshangguizhou/utils'; } 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) { export default function uploadFile(params) {
return request(uploadUrl, { return request(uploadUrl, {
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论