Xiuxiu 组件
import React, { Component } from 'react';
class XiuXiu extends Component {
componentDidMount() {
const {closeModal, imageUrl, uploadUrl, formData} = this.props;
/* 第1个参数是加载编辑器div容器，第2个参数是编辑器类型，第3个参数是div容器宽，第4个参数是div容器高*/
xiuxiu.embedSWF('altContent', 1, '700px', '520px');
// 修改为您自己的图片上传接口
xiuxiu.setUploadURL(uploadUrl);
xiuxiu.setUploadType(2);
xiuxiu.setUploadDataFieldName('file');
xiuxiu.setUploadArgs(formData);
xiuxiu.onInit = function () {
xiuxiu.loadPhoto(imageUrl);
};
xiuxiu.onUploadResponse = function (data) {
closeModal(true);
};
xiuxiu.onBatchUploadComplete = function () {
closeModal(true);
};
xiuxiu.onClose = function(id) {
closeModal(false);
};
xiuxiu.onUpload = function(id) {
closeModal(true);
};
}
render() {
return (
<div id='altContent'>
</div>
);
}
}
export default XiuXiu;
XiuxiuComponent
class XiuXiuModal extends Component {
state = {
visible: false,
}
showModal = () => {
this.setState({visible: true});
}
closeModal = (isEdit) => {
const {imageUrl} = this.props;
this.props.onClose(imageUrl, isEdit);
this.setState({visible: false});
}
render() {
const {children, policyImage, imagePath} = this.props;
const formData = {
signature: policyImage.signature,
OSSAccessKeyId: policyImage.accessid,
policy: policyImage.policy,
key: imagePath,
success_action_status: '200',
};
return (
<a onClick={this.showModal}>
{children}
{this.state.visible && <Modal wrapClassName='xiuxiu-wrapper' closable={false} width='700px' footer={null} title={null} visible >
<XiuXiu uploadUrl={policyImage.host} formData={formData} closeModal={this.closeModal} {...this.props} />
</Modal>}
</a>
);
}
}
最终引入
import XiuXiu from 'components/XiuXiu';
class ItemBox extends Component {
componentDidMount () {
const {folderFormatType, folderId, actions: {policyActions: {getImagePolicy}, ownActions: {loadMaterial}}} = this.props;
loadMaterial(folderId, undefined, true, folderFormatType);
getImagePolicy();
}
cancelEditImage = (imageUrl, isEdit) => {
const {actions: {ownActions: {editMaterial}}, materials} = this.props;
const item = find(materials, {coverImage: imageUrl});
if(isEdit) {
editMaterial({
id: item.id,
version: item.version + 0.1,
});
}
}
render () {
const {actions: {ownActions: {addMaterial, loadMaterial}},
page, policyImage, materials, folderId, folder, profile} = this.props;
return (
<XiuXiuModal onClose={this.cancelEditImage} imagePath={item.path} policyImage={policyImage} imageUrl={item.url}>
编辑图片
</XiuXiuModal>
);
}
}
注意：
1、引入美图秀秀必须加载上传图片接口
2、设置crossdomain.xml
下载crossdomain.xml文件，把解压出来的crossdomain.xml文件放在您保存图片或图片来源的服务器根目录下，
比如： http://example.com.cn，那么crossdomain.xml的路径为：http://example.com.cn/crossdomain.xml。
需要注意的是crossdomain.xml必须部署于站点根目录下才有效， crossdomain.xml的目的是授权来自美图域下的flash向您的站点上传图片或者从您的站点加载图片。
【备注】由于本地测试会被flash安全沙箱拦住，请自行搭建web服务器，在web 环境中测试。