锐客网

  1. 首页 > it技术 > >

react|react antd表格中渲染一张或多张图片的实例

使用antd table中显示一张图片，代码如下：

const columns = [ { title: "姓名", dataIndex: "name", width: 100 , // table列定宽 可不设fixed: "left" // 固定列的位置 }, { title: "联系电话", width: 150, dataIndex: "phone" }, { title:"显示一张图片", width:150， dataIndex:"img"， render：(text)=> react|react antd表格中渲染一张或多张图片的实例
文章图片

点击图片放大预览效果：
react|react antd表格中渲染一张或多张图片的实例
文章图片

【react|react antd表格中渲染一张或多张图片的实例】补充知识：React中antd框架下upload多个图片简单上传
antd的上传组件也是挺好康的，预览、删除也特别方便。适合表单上传。
查询资料多个上传处理 不明确，我就在下面name为file的input隐藏域内储存多个图片上传
这行代码是限制多个图片上传的总数，这里目前是不能超过6张图片，到达六张图片后，点击上传的按钮将会消失。
{this.props.tAccessory >= 6 ? null : uploadButton}
点击眼睛会弹出modl框扩大显示图片。
react|react antd表格中渲染一张或多张图片的实例
文章图片

全文代码如下，稍加修改即可使用。
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 = (Upload ); const { getFieldDecorator } = this.props.form; const formItemLayout = {labelCol: { span: 8 },wrapperCol: { span: 10 }, }; const props={fileList}; return (
{getFieldDecorator('fileList',{initialValue:this.props.tAccessory,valuePropName: 'file'})({this.props.tAccessory >= 6 ? null : uploadButton}react|react antd表格中渲染一张或多张图片的实例)}//这里是多个上传获取到的PhotoList {getFieldDecorator('file',{initialValue:this.props.tAccessory,valuePropName: 'file'})()} ); }}function mapStateToProps(state) { const {csIntro,arPicture,tCsInfo,modelResult,tAccessory} = state.cusy; return {csIntro,arPicture,tCsInfo,modelResult,tAccessory}; }export default connect(mapStateToProps)(Form.create()(AddMa));

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

    推荐阅读


    上一篇：C语言实现扫雷经典游戏

    下一篇：SpringBoot实现API接口的完整代码