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 {
} 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
浏览文件 @ 66bbcd8f
......@@ -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');
return new Promise((resolve, reject) => resolve(true));
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
浏览文件 @ 66bbcd8f
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,31 +21,17 @@ 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) => {
pc = new window.PhotoClip('#clipArea', {
size: [200, 280],
outputSize: [200, 280],
file: '#file',
view: '#view',
ok: '#clipBtn',
loadStart: function() {
console.log('开始读取照片');
},
loadComplete: function() {
console.log('照片读取完成');
},
done: function(dataURL) {
setData(dataURL);
},
fail: function(msg) {
alert(msg);
},
});
})
if (!window.PhotoClip) {
importAll();
}
// 加载的图片必须要与本程序同源，否则无法截图
// pc.load('img/mm.jpg');
}, []);
function uploadImg() {
......@@ -56,57 +39,133 @@ export default function Index({}) {
Toast.info('请先上传图片,并拖动截取', 2);
return false;
}
// 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);
// }
// });
// }
// });
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('开始读取照片');
},
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 (
<Fragment>
<div className={styles.photo}>
<div id='clipArea' style={{ height: '300px' }} />
<div className={styles.photo2}>
<Button
type='primary'
inline
size='small'
id='clipBtn'
style={{ marginLeft: '20px' }}
>
截取
</Button>
</div>
<p style={{ color: 'red', padding: '20px' }}>
提示:
<br />
证件照上传要求：免冠正面照片，照片上正常应该看到人的两耳轮廓，照片尺寸可以为一寸或二寸，颜色可以为黑白或彩色。底色可为白色或蓝色.
</p>
<div
id='view'
style={{
margin: '0 auto',
width: '200px',
height: '280px',
backgroundColor: '#666',
<a className={styles.handle} onClick={handleAClick}>
{!!value ? <img src={queryFileUrl(value)} /> : '点击上传'}
</a>
{
<Modal
visible={visible}
width={'95vw'}
forceRender={true}
onCancel={() => {
closeModal();
}}
/>
<WingBlank style={{ marginTop: '20px', marginBottom: '20px' }}>
<Button type='warning' onClick={uploadImg}>
上传
</Button>
<WhiteSpace />
</WingBlank>
</div>
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
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>
);
}
one_stop_public/libs/Split/PhotoClip/index.less
浏览文件 @ 66bbcd8f
.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
浏览文件 @ 66bbcd8f
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, {
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论