个人中心
gpt4 book ai didi

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

转载 作者：qq735679552 更新时间：2022-09-28 22:32:09 24 4
gpt4 key购买 nike

CFSDN坚持开源创造价值，我们致力于搭建一个资源共享平台，让每一个IT人在这里找到属于你的精彩世界.

这篇CFSDN的博客文章react antd表格中渲染一张或多张图片的实例由作者收集整理，如果你对这篇文章有兴趣，记得点赞哟.

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

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
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表格中渲染一张或多张图片的实例

全文代码如下，稍加修改即可使用.

  1. import React from 'react'; 
  2. import { Form, Input,Upload,Icon,Modal} from 'antd'; 
  3. import { connect } from 'dva'; 
  4. const FormItem = Form.Item; 
  5. const { TextArea } = Input; 
  6. function getBase64(file) { 
  7.  return new Promise((resolve, reject) => { 
  8.  const reader = new FileReader(); 
  9.  reader.readAsDataURL(file); 
  10.  reader.onload = () => resolve(reader.result); 
  11.  reader.onerror = error => reject(error); 
  12.  }); 
  13. } 
  14. class AddMa extends React.Component { 
  15.  state = { 
  16.  value: '', 
  17.  previewVisible: false, 
  18.  previewImage: '', 
  19.  fileList:[], 
  20.  }; 
  21.  onChange = ({ target: { value } }) => { 
  22.  this.setState({ value }); 
  23.  }; 
  24. //场地图片 
  25.  handleCancel = () => this.setState({ previewVisible: false }); 
  26.  handlePreview = async file => { 
  27.  if (!file.url && !file.preview) { 
  28.   file.preview = await getBase64(file.originFileObj); 
  29.  } 
  30.  this.setState({ 
  31.   previewImage: file.url || file.preview, 
  32.   previewVisible: true, 
  33.  }); 
  34.  console.log(file); 
  35.  }; 
  36.  handleChange = ({ fileList }) => this.setState({ fileList:fileList }); 
  37.  beforeUpload=(file)=>{ 
  38.   this.setState(({ 
  39.   fileList: [this.state.fileList, file], 
  40.   })); 
  41.  return false; 
  42.  } 
  43.  render() { 
  44.  const { previewVisible, previewImage, fileList,value} = this.state; 
  45.  const uploadButton = ( 
  46.   <div> 
  47.   <Icon type="plus" /> 
  48.   <div className="ant-upload-text">Upload</div> 
  49.   </div> 
  50.  ); 
  51.  const { getFieldDecorator } = this.props.form; 
  52.  const formItemLayout = { 
  53.   labelCol: { span: 8 }, 
  54.   wrapperCol: { span: 10 }, 
  55.  }; 
  56.  const props={fileList}; 
  57.  return ( 
  58.   <div> 
  59.   <Form> 
  60.    <FormItem{...formItemLayout} label="现场图片"> 
  61.    {getFieldDecorator('fileList',{initialValue:this.props.tAccessory,valuePropName: 'file'}) 
  62.    ( 
  63.     <div > 
  64.     <Upload name="file" {...props} 
  65.       listType="picture-card" 
  66.       onPreview={this.handlePreview} 
  67.       onChange={this.handleChange} 
  68.       fileList={fileList} 
  69.       accept=".jpg,.png,.gif,.jpeg" 
  70.       beforeUpload={this.beforeUpload} 
  71.     > 
  72.      {this.props.tAccessory >= 6 ? null : uploadButton} 
  73.     </Upload> 
  74.     <Modal visible={previewVisible} footer={null} onCancel={this.handleCancel}> 
  75.      <img alt="example" style={{ width: '100%' }} src={previewImage} /> 
  76.     </Modal> 
  77.     </div> 
  78.    )}</FormItem> 
  79.     
  80.   //这里是多个上传获取到的PhotoList 
  81.    <FormItem{...formItemLayout} > 
  82.    {getFieldDecorator('file',{initialValue:this.props.tAccessory,valuePropName: 'file'}) 
  83.    ( 
  84.     <input type="hidden" name="img" multiple="multiple" /> 
  85.    )}</FormItem> 
  86.   </Form> 
  87.   </div> 
  88.  ); 
  89.  } 
  90. } 
  91.  
  92. function mapStateToProps(state) { 
  93.  const {csIntro,arPicture,tCsInfo,modelResult,tAccessory} = state.cusy; 
  94.  return {csIntro,arPicture,tCsInfo,modelResult,tAccessory}; 
  95. } 
  96.  
  97. export default connect(mapStateToProps)(Form.create()(AddMa)); 

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

原文链接：https://blog.csdn.net/lucky569/article/details/108373954 。

最后此篇关于react antd表格中渲染一张或多张图片的实例的文章就讲到这里了,如果你想了解更多关于react antd表格中渲染一张或多张图片的实例的内容请搜索CFSDN的文章或继续浏览相关文章，希望大家以后支持我的博客！ 。

24 4 0
文章推荐： CentOS6.5环境安装nginx服务器及负载均衡配置操作详解
文章推荐： linux下制作ISO文件
文章推荐： 基于react后端渲染模板引擎noox发布使用
文章推荐： 采用React编写小程序的Remax框架的编译流程解析(推荐)
qq735679552
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com