lrz实现原理_react+antd+react-cropper+lrz 实现图片剪裁后压缩上传
import React, { PropTypes } from 'react';
import { Form, Input, Row, Col, Table, Icon, Select, Button, Upload, Modal, Spin, Tooltip, Popconfirm, message } from 'antd';
// import ReactCoreImageUpload from 'react-core-image-upload';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import _isEmpty from 'lodash/isEmpty';
import Cropper from 'react-cropper';
import lrz from 'lrz'
import '../../../../node_modules/cropperjs/dist/cropper.css';
import * as action from '../action';
import reqwest from 'reqwest';
import MsgBox from 'MsgBox';
const FormItem = Form.Item;
const Option = Select.Option;
class ActiveComponent extends React.Component {
constructor() {
super();
this.cropper = '',
this.state = {
fileList: [],
srcCropper: '',
previewImage: '',
selectImgSize: '0',
selectImgName: '',
selectImgSuffix: '',
submitting: false,
disabledUpload: true,
previewVisible: false,
uploadedImageFile: '',
selectedImageFile: '',
editImageModalVisible: false,
// fileList: [{
// uid: -1,
// name: 'xxx.png',
// status: 'done',
// url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
// }],
}
}
componentDidMount() {
// if (this.props.getActInfoResult && this.props.getActInfoResult.data) {
// this.props.form.setFieldsValue({
// ...nextProps.getActInfoResult.data
// })
// }
if (this.props.isEditFlages) {
this.setState({ disabledUpload: false })
this.props.disabledUploadAction({disabledUpload: true})
} else {
this.props.disabledUploadAction({disabledUpload: false})
}
}
componentWillReceiveProps(nextProps) {
// 跳转过来的才是真的赋值 需要一个标记
if (this.props.getActInfoResult!==nextProps.getActInfoResult && nextProps.getActInfoResult && nextProps.getActInfoResult.data) {
this.props.form.setFieldsValue({
...nextProps.getActInfoResult.data
})
}
if (this.props.isEditFlages!==nextProps.isEditFlages && nextProps.isEditFlages) {
this.setState({ disabledUpload: false })
this.props.disabledUploadAction({disabledUpload: true})
}
if (this.props.saveFileListData!==nextProps.saveFileListData) {
if (nextProps.saveFileListData && nextProps.saveFileListData.length>0 && nextProps.saveFileListData[nextProps.saveFileListData.length - 1].thumbUrl) {
this.props.uploadImg({ imgbase: nextProps.saveFileListData[nextProps.saveFileListData.length - 1].thumbUrl })
}
}
if (this.props.uploadImgByBase64Result!==nextProps.uploadImgByBase64Result && nextProps.uploadImgByBase64Result) {
// 成功上传之后关闭
this.setState({ editImageModalVisible: false })
}
// if (this.props.getImgListResult!==nextProps.getImgListResult) {
// console.log('this.props.getImgListResult / nextProps.getImgListResult', this.props.getImgListResult, nextProps.getImgListResult);
// // 当成功返回之后再做处理
// if (nextProps.getImgListResult.data && this.props.getImgListResult.data && this.state.selectImgName!=="" && nextProps.getImgListResult.data.length>0 && nextProps.getImgListResult.data.length>this.props.getImgListResult.data.length) {
// console.log('执行成功~~getImgListResult', nextProps.getImgListResult, this.state.selectImgName);
// for (var i = 0; i < nextProps.getImgListResult.data.length; i++) {
// if (nextProps.getImgListResult.data[i].filename+nextProps.getImgListResult.data[i].suffix == this.state.selectImgName) {
// console.log('定位文件');
// this.setState({
// srcCropper: "data:image/*;base64,"+nextProps.getImgListResult.data[i].imgbase,
// editImageModalVisible: true
// })
// }
// }
// }
// }
if (this.props.againActionFlage!==nextProps.againActionFlage && !nextProps.againActionFlage) {
this.props.getImgList({ actid: nextProps.actid })
}
if (this.props.isSuccessFlage!==nextProps.isSuccessFlage && nextProps.isSuccessFlage==1) {
// 保存成功之后才能上传
this.setState({ disabledUpload: false })
this.props.disabledUploadAction({disabledUpload: true})
} else if (this.props.isSuccessFlage!==nextProps.isSuccessFlage && nextProps.isSuccessFlage==0) {
this.setState({ disabledUpload: true })
this.props.disabledUploadAction({disabledUpload: false})
}
}
handleCancel(){ this.setState({ previewVisible: false, editImageModalVisible: false, selectImgName: "" }) }
handlePreview(file){
this.setState({
previewImage: file.url || file.thumbUrl,
previewVisible: true,
});
}
handleChange({ fileList }) {
console.log('fileList', fileList);
// if (fileList && fileList.length>0 && fileList[fileList.length - 1].thumbUrl) {
// this.props.uploadImg({ imgbase: fileList[fileList.length - 1].thumbUrl })
// }
// this.props.saveFileList(fileList)
// this.setState({ fileList })
this.props.getImgList({ actid: this.props.actid })
}
formSubmit(){
// console.log('this.props.vxkpProjid',this.props.vxkpProjid); return;
const formValues = this.props.form.getFieldsValue();
if (_isEmpty(formValues.actname)) {
MsgBox.warning({ content: '请填写活动名称' });
return;
}
if (_isEmpty(formValues.templateid)) {
MsgBox.warning({ content: '请填写认购书模板' });
return;
}
if (_isEmpty(formValues.details)) {
MsgBox.warning({ content: '请填写活动详情' });
return;
}
var saveParams = {
...formValues,
projid: this.props.vxkpProjid
};
for (var i = 0; i < this.props.getProjTemplateResult.data.length; i++) {
if (formValues.templateid == this.props.getProjTemplateResult.data[i].templateid) {
saveParams.templatename = this.props.getProjTemplateResult.data[i].templatename;
break;
}
}
if (this.props.actid && this.props.actid!==null) {
saveParams.actid = this.props.actid
} else {
saveParams.actid = ''
}
// saveParams.actid = 'C93AA9A8-50FC-44F4-8B76-229183A9E2A0';
this.props.seaveActInfo(saveParams)
// this.setState({ disabledUpload: false })
}
genOptions(data = []) {
const Option = Select.Option;
return data instanceof Array && data.map((v, k) => {
return {v.templatename}
})
}
handleRes(res) {
console.log('res', res);
}
deleteImg(record) {
console.log('record', record);
this.props.deleteImg({ id: record.id, actid: record.actid })
// this.props.getImgList({ actid: record.actid })
}
_crop(){
console.log(this.refs.cropper.getCroppedCanvas().toDataURL());
}
handleFileChange(e) { //input-file
const file = e.target.files[0]
console.log('文件', e, file);
if (file) {
if (file.size > 1*1024*1024) {
message.error("文件过大")
return;
}
const fileReader = new FileReader()
fileReader.onload = (e) => {
console.log('e.target.result', e.target.result);
const dataURL = e.target.result
this.setState({srcCropper: dataURL})
}
fileReader.readAsDataURL(file)
this.setState({
editImageModalVisible: true,
uploadedImageFile: file,
})
// e.target.value = ''
}
}
beforeUpload(file) {
const isLt2M = file.size / 1024 / 1024 < 10;
if (!isLt2M) {
MsgBox.error({content: '文件大小不能超过10M'});
return false;
}
var reader=new FileReader();
reader.readAsDataURL(file); //开始读取文件
// 因为读取文件需要时间,所以要在回调函数中使用读取的结果
reader.onload = (e) => {
console.log('e.target.result', file);
const dataURL = e.target.result;
this.setState({
srcCropper: dataURL,
selectImgName: file.name,
selectImgSize: (file.size / 1024 / 1024),
selectImgSuffix: file.type.split("/")[1],
editImageModalVisible: true,
})
}
return false;
}
saveImg() {
// console.log('fileList', this.state.fileList, this.state.srcCropper);
console.log('srcCropper', this.state.selectImgSize);
const _this = this;
var qualityVal = 0.8, initVal = Number(this.state.selectImgSize);
if (initVal > 0.2 && initVal < 1) {
qualityVal = 0.6
} else if (initVal >= 1 && initVal < 3) {
qualityVal = 0.4
} else if (initVal >= 3 && initVal < 5) {
qualityVal = 0.2
} else if (initVal >= 5) {
qualityVal = 0.1
}
lrz(this.refs.cropper.getCroppedCanvas().toDataURL(), {quality: qualityVal}).then((results)=> {
console.log('results', results);
_this.props.uploadImgByBase64({
actid: _this.props.actid,
imgsize: results.fileLen,
suffix: _this.state.selectImgSuffix,
filename: _this.state.selectImgName,
imgbase: results.base64.split(";base64,")[1],
})
})
// var size = this.refs.cropper.getData()
// console.log('this.refs.cropper.getCroppedCanvas().toDataURL()', this.refs.cropper.getCroppedCanvas().toDataURL());
// console.log('size', size);
// this.handleSubmit()
}
// handleSubmit = () => {
// if (!this.state.submitting) {
// let url = `/activityinfo/uploadImg.do`
// // 拿到文件名
// let filename = this.state.uploadedImageFile.name
//
// message.info("正在上传图片")
// // TODO: 这里可以尝试修改上传图片的尺寸
// this.cropper.getCroppedCanvas().toBlob(async blob => {
// // 创造提交表单数据对象
// const formData = new FormData()
// // 添加要上传的文件
// console.log('blob, filename', blob, filename);
// formData.append('file', blob, filename)
// // 提示开始上传
// this.setState({submitting: true})
// console.log('url, formData', url, formData);
// // 上传图片
// const resp = await http.post(url, formData)
// console.log('resp.data.data', resp);
// // 拿到服务器返回的数据
// // this.props.onUploadedFile(resp.data.data)
// // 提示上传完毕
// this.setState({submitting: false})
// // 关闭弹窗
// // this.props.onClose()
// })
// }
// }
// componentWillReceiveProps(nextProps) {}
render() {
const { getFieldDecorator } = this.props.form;
const { previewVisible, previewImage, fileList, editImageModalVisible } = this.state;
const uploadButton = (
);
const loopImg = (data = []) => ((data==null || data=='' || data=='null' || data.length==0) ? null : data.map((item, index) => {
return (
{/*
);
}));
const loopImg2 = (data = []) => ((data==null || data=='' || data=='null' || data.length==0) ? null : data.map((item, index) => {
return (
title="是否删除这张图片?"
onConfirm={() => this.deleteImg(item)}
okText="是"
cancelText="否"
placement="bottomLeft"
>
{/*
);
}));
let uploadParams = {
action: '/activityinfo/uploadImg.do',
listType: "picture-card",//上传列表的内建样式，支持三种基本样式 text, picture 和 picture-card
accept: "image/*",
onRemove: (file) => {
this.setState(({ fileList }) => {
const index = fileList.indexOf(file);
const newFileList = fileList.slice();
newFileList.splice(index, 1);
return {
fileList: newFileList,
};
});
},
// fileList: this.state.fileList,
// beforeUpload: this.beforeUpload
// beforeUpload: (file) => {
// console.log('upload file', file);
// this.setState(({ fileList }) => ({
// fileList: [...fileList, file],
// editImageModalVisible: true,
// srcCropper: file.name,
// }));
// return false;
// },
};
if (this.props.actid) {
uploadParams.action = '/activityinfo/uploadImg.do?actid='+this.props.actid+''
}
return (
{getFieldDecorator('actname')(
)}
{getFieldDecorator('templateid')(
{this.genOptions(this.props.getProjTemplateResult.data)}
)}
{getFieldDecorator('details')(
)}
{getFieldDecorator('phone')(
)}
{...uploadParams}
// fileList={fileList}
beforeUpload={::this.beforeUpload}
// onPreview={::this.handlePreview}
onChange={::this.handleChange}
showUploadList={false}
disabled={this.state.disabledUpload} //测试可先注释，测试完成后续解开注释
>
{fileList.length >= 3 ? null : uploadButton}
注意: 图片上传需保存活动信息后才能上传
{/* 截图工具 */}
{/*
type="file"
accept="image/jpeg,image/jpg,image/png"
className="base-upload-input"
onChange={::this.handleFileChange}
/> */}
{
this.props.getImgListResult && this.props.getImgListResult.data && this.props.getImgListResult.data!==null && this.props.getImgListResult.data.length>0 ?
{loopImg2(this.props.getImgListResult.data)}
:
}
保存
// onCancel={::this.handleCancel}
key="cropper_img_modal_key"
// title="图片裁剪"
visible={editImageModalVisible}
width={1000}
loading={this.props.loading}
footer={[
保存,
取消
]}
// style={ { 'max-height': 300 }}
>
style={ { 'height': 400 }}
src={this.state.srcCropper}
className="company-logo-cropper"
ref="cropper"
// ref={cropper => this.cropper = cropper}
// Cropper.js options
viewMode={1}
zoomable={false}
aspectRatio={75/32}
guides={true}
viewMode={1}
background={false} //是否显示马赛克
rotatable={true} //是否旋转
preview='.cropper-preview'
/>
)
}
}
function mapStateToProps(state, ownProps) {
return {
loading: state.getIn(['vxKp', 'loading']),
userInfo: state.getIn(['APP', 'userInfo']),
vxkpProjid: state.getIn(['APP', 'vxkpProjid']), //微信开盘活动对应的是头部选择的id
ProTreSelected: state.getIn(['APP', 'ProTreSelected']),
isSuccessFlage: state.getIn(['vxKp', 'isSuccessFlage']),
againActionFlage: state.getIn(['vxKp', 'againActionFlage']),
saveFileListData: state.getIn(['vxKp', 'saveFileListData']),
getImgListResult: state.getIn(['vxKp', 'getImgListResult']),
getActInfoResult: state.getIn(['vxKp', 'getActInfoResult']),
seaveActInfoResult: state.getIn(['vxKp', 'seaveActInfoResult']),
getProjTemplateResult: state.getIn(['vxKp', 'getProjTemplateResult']),
uploadImgByBase64Result: state.getIn(['vxKp', 'uploadImgByBase64Result']),
};
}
function mapDispatchToProps(dispatch) {
return {
...bindActionCreators(action, dispatch),
}
}
export default connect(mapStateToProps, mapDispatchToProps)(Form.create()(ActiveComponent))