使用antd table中显示一张图片,代码如下:
const columns = [ { title: "姓名", dataIndex: "name", width: 100 , // table列定宽 可不设 fixed: "left" // 固定列的位置 }, { title: "联系电话", width: 150, dataIndex: "phone" }, { title:"显示一张图片", width:150, dataIndex:"img", render:(text)=> <img src={text}/> }, { title:"显示多张图片", width:400, dataIndex:"imgs", render: text => { // text是后端传的多个url,需要逗号分隔再显示图片 if (text) { return ( <div style={{ display: "flex" }}> {text.split(",").map((items, index) => { return ( <div key={index} className="common-img-list" style={{ width: "100px", height: "100px", marginLeft: "4px", overflow: "hidden" }} > <img style={{ width: "100%" }} src={items} onClick={() => { InitImageViwer(); // 点击放大图片 }} /> </div> ); })} </div> ); } }, ] // 点击放大图片预览 function InitImageViwer( box = 'common-img-list', // 注意class不要忘记了 option = {}, callBack ) { setTimeout(() => { const viewList = [] const el = document.querySelectorAll(`.${box}`) if (el.length) { el.forEach((z, x) => { viewList[x] = new ImageViewer(z, option) }) callBack && callBack(viewList) } }, 1000) } // table 使用 scroll 表格滚动 <Table columns={columns} scroll={{ x: 1500, y: 500 }} />
实现效果图:
点击图片放大预览效果:
补充知识:React中antd框架下upload多个图片简单上传
antd的上传组件也是挺好康的,预览、删除也特别方便。适合表单上传。
查询资料多个上传处理 不明确,我就在下面name为file的input隐藏域内储存多个图片上传
这行代码是限制多个图片上传的总数,这里目前是不能超过6张图片,到达六张图片后,点击上传的按钮将会消失。
{this.props.tAccessory >= 6 "" src="/UploadFiles/2021-04-02/20201028113144.jpg">
全文代码如下,稍加修改即可使用。
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.props.form; const formItemLayout = { labelCol: { span: 8 }, wrapperCol: { span: 10 }, }; const props={fileList}; return ( <div> <Form> <FormItem{...formItemLayout} label="现场图片"> {getFieldDecorator('fileList',{initialValue:this.props.tAccessory,valuePropName: 'file'}) ( <div > <Upload name="file" {...props} listType="picture-card" onPreview={this.handlePreview} onChange={this.handleChange} fileList={fileList} accept=".jpg,.png,.gif,.jpeg" beforeUpload={this.beforeUpload} > {this.props.tAccessory >= 6 "example" style={{ width: '100%' }} src={previewImage} /> </Modal> </div> )}</FormItem> //这里是多个上传获取到的PhotoList <FormItem{...formItemLayout} > {getFieldDecorator('file',{initialValue:this.props.tAccessory,valuePropName: 'file'}) ( <input type="hidden" name="img" multiple="multiple" /> )}</FormItem> </Form> </div> ); } } 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表格中渲染一张或多张图片的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。
华山资源网 Design By www.eoogi.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
华山资源网 Design By www.eoogi.com
暂无评论...
RTX 5090要首发 性能要翻倍!三星展示GDDR7显存
三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。
首次推出的GDDR7内存模块密度为16GB,每个模块容量为2GB。其速度预设为32 Gbps(PAM3),但也可以降至28 Gbps,以提高产量和初始阶段的整体性能和成本效益。
据三星表示,GDDR7内存的能效将提高20%,同时工作电压仅为1.1V,低于标准的1.2V。通过采用更新的封装材料和优化的电路设计,使得在高速运行时的发热量降低,GDDR7的热阻比GDDR6降低了70%。
更新日志
2024年09月21日
2024年09月21日
- [ABC]安娜-胆麦发烧女声[6N纯银镀膜][2016[低速原抓WAV+CUE]
- 任天堂今晚举行直面会!第三方及独立游戏展示
- 《哆啦A梦的铜锣烧店物语》发售!开罗公式+哆啦A梦
- 任天堂公布《塞尔达传说》系列时间线:野炊与王泪独立在外
- 五条人.2012-一些风景2CD【刀马旦】【WAV+CUE】
- 陈奕迅.2013-Easons.Life演唱会2CD(2024环球红馆40复刻系列)【环球】【WAV+CUE】
- 许美静.1995-遗憾(新马版)【上华】【WAV+CUE】
- 《叶倩文 歌声情缘》[WAV+CUE][410MB]
- 《张国荣 首首动听经典不容错过 追忆的风 2CD》[WAV+CUE][870MB]
- 《腾格尔 容中尔甲 亚东 高原三星 男人篇 3CD》[WAV/分轨][1GB]
- 命运圣契公测实测可用兑换码大全 命运圣契最新兑换码分享
- 黑神话悟空上品疾蝠精魄获取方法一览|上品疾蝠精魄收集攻略
- 《七龙珠电光炸裂!ZERO》GT角色预告片曝光,15位新角色登场
- [ABC]安娜-胆麦发烧女声[6N纯银镀膜][2016[低速原抓WAV+CUE]
- NewViennaOctetViennaWindSoloists-TheDeccaRecordings(2024)18CD[24-48][FLAC]-7