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))