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


Posted in Javascript onOctober 28, 2020

使用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表格中渲染一张或多张图片的实例

点击图片放大预览效果:

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

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

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

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

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

{this.props.tAccessory >= 6 ? null : uploadButton}

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

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 = (
  <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 ? null : uploadButton}
    </Upload>
    <Modal visible={previewVisible} footer={null} onCancel={this.handleCancel}>
     <img alt="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表格中渲染一张或多张图片的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS 控件事件小结
Oct 31 Javascript
js 编码转换 gb2312 和 utf8 互转的2种方法
Aug 07 Javascript
js函数获取html中className所在的内容并去除标签
Sep 08 Javascript
javaScript对文字按照拼音排序实现代码
Dec 27 Javascript
node.js中的path.isAbsolute方法使用说明
Dec 08 Javascript
node.js中的fs.write方法使用说明
Dec 15 Javascript
你应该知道的几类npm依赖包管理详解
Oct 06 Javascript
swiper插件自定义切换箭头按钮
Dec 28 Javascript
js将当前时间格式化为 年-月-日 时:分:秒的实现代码
Jan 20 Javascript
详解Angular5/Angular6项目如何添加热更新(HMR)功能
Oct 10 Javascript
vue 路由子组件created和mounted不起作用的解决方法
Nov 05 Javascript
Html5生成验证码的示例代码
May 10 Javascript
js实现淘宝浏览商品放大镜功能
Oct 28 #Javascript
js实现详情页放大镜效果
Oct 28 #Javascript
用js实现放大镜效果
Oct 28 #Javascript
如何在 ant 的table中实现图片的渲染操作
Oct 28 #Javascript
WebStorm中如何将自己的代码上传到github示例详解
Oct 28 #Javascript
原生JS生成指定位数的验证码
Oct 28 #Javascript
微信小程序接入vant Weapp组件的详细步骤
Oct 28 #Javascript
You might like
dede3.1分页文字采集过滤规则详说(图文教程)续二
2007/04/03 PHP
php adodb介绍
2009/03/19 PHP
php 来访国内外IP判断代码并实现页面跳转
2009/12/18 PHP
php 处理上百万条的数据库如何提高处理查询速度
2010/02/08 PHP
php去除HTML标签实例
2013/11/06 PHP
javascript smipleChart 简单图标类
2011/01/12 Javascript
Jquery中对数组的操作代码
2011/08/12 Javascript
jquery实现点击TreeView文本父节点展开/折叠子节点
2013/01/10 Javascript
nodejs教程 安装express及配置app.js文件的详细步骤
2013/05/11 NodeJs
GRID拖拽行的实例代码
2013/07/18 Javascript
javascript模拟实现ajax加载框实例
2014/10/15 Javascript
基于jQuery插件实现环形图标菜单旋转切换特效
2015/05/15 Javascript
jquery表单对象属性过滤选择器实例分析
2015/05/18 Javascript
利用JavaScript判断浏览器类型及版本
2016/08/23 Javascript
vue内置指令详解
2018/04/03 Javascript
ES6 中可以提升幸福度的小功能
2018/08/06 Javascript
一次微信小程序内地图的使用实战记录
2019/09/09 Javascript
JS中封装axios来管控api的2种方式
2019/09/11 Javascript
[02:19]2018年度DOTA2最佳核心位选手-完美盛典
2018/12/17 DOTA
对python3.4 字符串转16进制的实例详解
2019/06/12 Python
Python中print函数简单使用总结
2019/08/05 Python
详解基于python-django框架的支付宝支付案例
2019/09/23 Python
tensorflow模型继续训练 fineturn实例
2020/01/21 Python
Python selenium模块实现定位过程解析
2020/07/09 Python
总结Pyinstaller的坑及终极解决方法(小结)
2020/09/21 Python
法国创作个性化T恤衫和其他定制产品平台:Tostadora
2018/04/08 全球购物
英国鹦鹉店:Parrot Essentials
2018/12/03 全球购物
解决方案设计综合面试题
2015/08/31 面试题
如何从一个文件档案的尾端新增记录
2016/12/02 面试题
指导教师评语
2014/04/26 职场文书
企业文化口号
2014/06/12 职场文书
材料员岗位职责
2015/02/10 职场文书
会计求职简历自我评价
2015/03/10 职场文书
爱心捐书倡议书
2015/04/27 职场文书
政审证明范文
2015/06/19 职场文书
自己搭建resnet18网络并加载torchvision自带权重的操作
2021/05/13 Python