本文出自：
http://blog.csdn.net/wyk304443164
参数都在
/** * Created by wuyakun on 2017/3/20. */ import React from 'react'; import {Upload, Icon, Modal, message} from 'antd'; import './uploadManyView.less'; import API_URL from '../../../common/url'; import common from '../../../common/common'; /** * 几个注意点： * 1.handleUpload返回的成功与失败,需要自行判断 * 2.接收参数为array[{uid,url}] * 3.吐出来的也是array * 4.给我通过value(看下方fileList) * 5.吐出去通过this.props.onChange(看下方handleChange()) */ class PicturesWall extends React.Component { state = { previewVisible: false, previewImage: '', length: this.props.length, maxFileSize: this.props.maxFileSize ? this.props.maxFileSize : 2, fileList: this.props.value instanceof Array ? this.props.value : [], action: API_URL.IMAGE_ACTION, appid: API_URL.APP_ID, secret: API_URL.SECRET, imageHead: API_URL.IMAGE_URL_HEAD, }; /** * 关闭预览 */ handleCancel = () => { this.setState({previewVisible: false}); }; /** * 查看预览 * @param file */ handlePreview = (file) => { this.setState({ previewImage: file.url || file.thumbUrl, previewVisible: true, }); }; /** * 处理图片更新 * @param e */ handleChange = (e) => { let fileList = this.handleUpload(e); this.props.onChange(fileList); }; /** * 处理更新 * @param e * @returns {*} */ handleUpload = (e) => { //再进行实际筛选，其实上面那一行没有用 let fileList = e.fileList.map(file => { if (file.response) { //这个地方是上传结束之后会调用的方法，这边是判断success!!! if (file.response.success) { return this.filter(file); } } return file; }); this.setState({fileList: fileList}); return fileList; }; /** * 过滤服务器返回的数据 * @param file */ filter = (file) => { const {name, response, uid, status} = file; return {name, url: response.data, uid, status}; }; /** * 上传之前的验证 */ beforeUpload = (file) => { const maxFileSize = this.state.maxFileSize; if (maxFileSize) { const isLtMax = file.size / 1024 / 1024 < maxFileSize; if (!isLtMax) { message.error(`文件大小超过${maxFileSize}M限制`); } return isLtMax; } }; render() { const {previewVisible, previewImage, appid, secret} = this.state; let fileList = this.state.fileList; if (fileList.length > 0) { fileList.map((file, i) => { if (!common.startsWith(file.url, 'http://')) { file.url = `${this.state.imageHead}${file.url}`; } }); } //一共有多少个图片 const uploadButton = fileList.length >= this.props.length ? null : ( <div> <Icon type="plus"/> </div> ); // showUploadList={false} 加了就显示不了 const props = { action: this.state.action, fileList: fileList, data: { appid: appid, secret: secret, }, headers: {'X-Requested-With': null}, // accept: "image/*", accept: "image/jpg,image/jpeg,image/png,image/bmp", onChange: this.handleChange, beforeUpload: this.beforeUpload, onPreview: this.handlePreview, listType: "picture-card", }; return ( <div className="clearfix"> <Upload {...props} > {fileList.length >= this.state.length ? null : uploadButton} </Upload> <Modal visible={previewVisible} footer={null} onCancel={this.handleCancel}> <img alt="example" style={{width: '100%'}} src={previewImage}/> </Modal> </div> ); } } export default PicturesWall;这样使用：
{/*公众号二维码*/} <FormItem style={{display: 'none'}} {...uploadLayout} label="公众号二维码" extra="建议尺寸100*100大小不超过2MB，上传后请至公众号管理进行公众号绑定"> {getFieldDecorator('qrcodeURL')( <UploadManyView length={1}/> )} </FormItem>