如何编写小程序_react antd表格中烘托一张或多张图

阅读  ·  发布日期 2021-01-05 10:04  ·  admin
react antd表格中渲染一张或多张图片的实例       这篇文章主要介绍了react antd表格中渲染一张或多张图片的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

实现效果图:

点击图片放大预览效果:

补充知识:React中antd框架下upload多个图片简单上传

antd的上传组件也是挺好康的,预览、删除也特别方便。适合表单上传。

查询资料多个上传处理 不明确,我就在下面name为file的input隐藏域内储存多个图片上传

这行代码是限制多个图片上传的总数,这里目前是不能超过6张图片,到达六张图片后,点击上传的按钮将会消失。

{this.essory = 6 null : uploadButton}

点击眼睛会弹出modl框扩大显示图片。

全文代码如下,稍加修改即可使用。

import React from 'react';
import { Form, Input,Upload,Icon,Modal} from 'antd';
import { connect } from 'dva';
const FormItem = Form.Item;
const { TextArea } = Input;
function getBase64(file) {
 return new Promise((resolve, reject) = {
 const reader = new FileReader();
 reader.readAsDataURL(file);
 reader.onload = () = resolve(reader.result);
 reader.onerror = error = reject(error);
class AddMa extends React.Component {
 state = {
 value: '',
 previewVisible: false,
 previewImage: '',
 fileList:[],
 onChange = ({ target: { value } }) = {
 this.setState({ value });
//场地图片
 handleCancel = () = this.setState({ previewVisible: false });
 handlePreview = async file = {
 if (!file.url !file.preview) {
 file.preview = await getBase64(file.originFileObj);
 this.setState({
 previewImage: file.url || file.preview,
 previewVisible: true,
 console.log(file);
 handleChange = ({ fileList }) = this.setState({ fileList:fileList });
 beforeUpload=(file)= {
 this.setState(({
 fileList: [this.state.fileList, file],
 }));
 return false;
 render() {
 const { previewVisible, previewImage, fileList,value} = this.state;
 const uploadButton = (
 div 
 Icon type="plus" / 
 div className="ant-upload-text" Upload /div 
 /div 
 const { getFieldDecorator } = this.pro凡科抠图.form;
 const formItemLayout = {
 labelCol: { span: 8 },
 wrapperCol: { span: 10 },
 const pro凡科抠图={fileList};
 return (
 div 
 Form 
 FormItem{...formItemLayout} label="现场图片" 
 {getFieldDecorator('fileList',{initialValue:this.essory,valuePropName: 'file'})
 div 
 Upload name="file" {...pro凡科抠图}
 listType="picture-card"
 onPreview={this.handlePreview}
 onChange={this.handleChange}
 fileList={fileList}
 accept=".jpg,.png,.gif,.jpeg"
 beforeUpload={this.beforeUpload}
 {this.essory = 6 null : uploadButton}
 /Upload 
 Modal visible={previewVisible} footer={null} onCancel={this.handleCancel} 
 img alt="example" '100%' }} src={previewImage} / 
 /Modal 
 /div 
 )} /FormItem 
 //这里是多个上传获取到的PhotoList 
 FormItem{...formItemLayout} 
 {getFieldDecorator('file',{initialValue:this.essory,valuePropName: 'file'})
 input type="hidden" name="img" multiple="multiple" / 
 )} /FormItem 
 /Form 
 /div 
function mapStateToPro凡科抠图(state) {
 const {csIntro,arPicture,tCsInfo,essory} = state.cusy;
 return {csIntro,arPicture,tCsInfo,essory};
export default connect(mapStateToPro凡科抠图)(Form.create()(AddMa));

以上这篇react antd表格中渲染一张或多张图片的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持凡科。