怎么新建MySQL数据库

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

实现效果图：

点击图片放大预览效果：

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

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

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

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

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

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

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

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表格渲染图片的操作是什么”的内容今天就到这，感谢各位的阅读，大家可以动手实际看看，对大家加深理解更有帮助哦。如果想了解更多相关内容的文章，关注我们，群英网络小编每天都会为大家更新不同的知识。