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 相关文章推荐
document.open() 与 document.write()的区别
Aug 13 Javascript
JavaScript 对象模型 执行模型
Oct 15 Javascript
JavaScript中常用的运算符小结
Jan 18 Javascript
ASP.NET jQuery 实例10 动态修改hyperlink的URL值
Feb 03 Javascript
Javascript实现页面跳转的几种方式分享
Oct 26 Javascript
angular.element方法汇总
Jan 07 Javascript
javascript生成随机数方法汇总
Nov 12 Javascript
关于javascript中dataset的问题小结
Nov 16 Javascript
JS监听微信、支付宝等移动app及浏览器的返回、后退、上一页按钮的事件方法
Aug 05 Javascript
js内置对象处理_打印学生成绩单的简单实现
Sep 24 Javascript
element-ui 关于获取select 的label值方法
Aug 24 Javascript
checkbox在vue中的用法小结
Nov 13 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
php中simplexml_load_string使用实例分享
2014/02/13 PHP
PHP Curl出现403错误的解决办法
2014/05/29 PHP
php广告加载类用法实例
2014/09/23 PHP
Thinkphp3.2.3整合phpqrcode生成带logo的二维码
2016/07/21 PHP
table行随鼠标移动变色示例
2014/05/07 Javascript
JavaScript实现多种排序算法
2016/02/24 Javascript
浅谈jQuery双事件多重加载的问题
2016/10/05 Javascript
JS实现图片垂直居中显示小结
2016/12/13 Javascript
Angular中点击li标签实现更改颜色的核心代码
2017/12/08 Javascript
vue iview实现动态路由和权限验证功能
2018/04/17 Javascript
js 图片转base64的方式(两种)
2018/04/24 Javascript
Vue动态组件与异步组件实例详解
2019/02/23 Javascript
JQuery事件委托原理与用法实例分析
2019/05/13 jQuery
Nuxt v-bind绑定img src不显示的解决
2019/12/05 Javascript
Python制作数据导入导出工具
2015/07/31 Python
在python中使用with打开多个文件的方法
2019/01/07 Python
简单了解Django ORM常用字段类型及参数配置
2020/01/07 Python
tensorflow之自定义神经网络层实例
2020/02/07 Python
解决Python图形界面中设置尺寸的问题
2020/03/05 Python
前端实现背景虚化但内容清晰且自适应 的实例代码
2019/08/01 HTML / CSS
详解如何将 Canvas 绘制过程转为视频
2021/01/25 HTML / CSS
印度尼西亚在线时尚购物网站:ZALORA印尼
2016/08/02 全球购物
Overload和Override的区别。Overloaded的方法是否可以改变返回值的类型
2013/10/30 面试题
行政助理岗位职责
2013/11/10 职场文书
安全责任协议书
2014/04/21 职场文书
数字化校园建设方案
2014/05/03 职场文书
医院节能减排方案
2014/06/13 职场文书
社区服务活动小结
2014/07/08 职场文书
部门2014年度工作总结
2014/11/12 职场文书
父亲节寄语大全
2015/02/27 职场文书
公司前台接待岗位职责
2015/04/03 职场文书
人工作失职检讨书
2015/05/05 职场文书
受欢迎的自荐信,就这么写!
2019/04/19 职场文书
java设计模式--七大原则详解
2021/07/21 Java/Android
德生BCL3000抢先使用感受和评价
2022/04/07 无线电
MySQL脏读,幻读和不可重复读
2022/05/11 MySQL