The react to install antd

NPM install ANTd --save or YARN ANTD If YARN is installed on the PC, you can choose Yarn installationCopy the code

The correct introduction of the ANTD file Scroll down to find the antD file code

Index. js imports the ANTD file

import { ConfigProvider, DatePicker, message } from 'antd'; Import zhCN from 'antd/lib/locale/zh_CN'; import zhCN from 'antd/lib/locale/zh_CN'; import moment from 'moment'; import 'moment/locale/zh-cn'; import 'antd/dist/antd.css'; import './index.css'; moment.locale('zh-cn');Copy the code

The renderings are shown below

The bulk of the statement is in the comments, and to reduce confusion, the code is written as a whole

You can debug and modify

import { PlusOutlined, LoadingOutlined } from "@ant-design/icons"; import { Upload, Modal, message, Button } from "antd"; import React, { useState, useMemo } from "react"; import qs from "qs"; 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); }); } function TableTwo(props) {// const [ImageUrl, props] props (props) setImageUrl] = useState( "http://vueshop.glbuys.com/userfiles/head/590472285.jpeg" ); State const [previewVisible, setpreviewVisible] = useState(false); Const [previewImage, setpreviewImage] = useState(""); Const [previewTitle, setpreviewTitle] = useState(""); Number [] const [nfileList, setFileList] = useState([]); const [loading, setLoading] = useState(false); // Loading status..... const [upImgloading, setUpImgloading] = useState(false); Const handleChange = ({file, fileList}) => {// {file, FileList} // Check whether the file format is jpeg const isJpgOrPng = file.type ===. If the file format is jpeg const isJpgOrPng = file.type === "image/jpeg"; if (! IsJpgOrPng) {message.error(" File format is incorrect!" ); return isJpgOrPng; } // Check whether the size of the image is less than or equal to 50k // 1 default is the smallest unit of bit // 1k = 1b * 1024 b // 1m = 1k * 1024 k const isLt50K = file.size <= 50 * 1024; if (! IsLt50K) {message.error(" file size must not exceed 50K!" ); return isLt50K; } if (isJpgOrPng && isLt50K) {// First empty the image address of the data passed from the edit or details setImageUrl(null); // Next update the list of uploaded images and re-render () setFileList(fileList); Status === "uploading") {// The upload button is being loaded..... setUpImgloading(true); return; } // If the upload status is done if (file.status === "done") {// If the upload button is loaded setUpImgloading(false); / / url + image path to get to upload pictures header address let url = "http://vueshop.glbuys.com/userfiles/head/" + file. The response. Data. Msbox; // If the form is in the form, you can backfill console.log(URL) with the form; }}}; Const handlePreview = async (file) => {// Click get the local popover and get the local path of the file to be uploaded if (! file.url && ! File.preview) {// * call the local popover to get the local image path and upload it to the file prototype chain // Call the asynchronous method getBase64 to get the file details file.preview = await getBase64(file.originFileObj); } / / state storing the addresses of the current upload pictures or image preview address setpreviewImage (file. The url | | file. The preview). // Whether to display the modal box setpreviewVisible(true); / / modal dialog title name setpreviewTitle (file. The name | | file. The url. The substring (file. The url. The lastIndexOf ("/") + 1)); }; / / cache the data passed useMemo of computational mathematics (() = > {/ / access route search passed the data cut off the first '/' let edit = props. The location. The search. The substr (1); Let editVal = edit? Let editVal = edit? Let editVal = edit? Let editVal = edit? Let editVal = edit? qs.parse(edit) : {}; // Set the image to state using setImageUrl(editval.img); } // Here [] [roots.location.search]); Const uploadButton = (<div> {upImgloading? <LoadingOutlined /> : <PlusOutlined /> <div style={{marginTop: 8}}> click to upload </div> </div>); Return (<> <Upload ="headfile") return (<> <Upload ="headfile" Action = "http://vueshop.glbuys.com/api/user/myinfo/formdatahead?token=1ec949a15fb709370f" / / picture upload type ListType ="picture-card" fileList={nfileList} // The default list can only upload one more for overwrite OnPreview ={handlePreview} // Click trigger upload image method to determine the format and size of the file and update the uploaded image onChange={handleChange} // Local popup to get the local image can get the suffix Accept =".jpg,.jpeg,.png" // Select multiple data to upload. Multiple ={true} > {/* Triplex operator to determine whether the image transmitted by the route exists. <img style={{ width: 100, height: 100 }} src={ImageUrl} alt="" /> ) : </Upload> {/* mask layer antd */} <Modal // visible={previewVisible} // Modal box title={previewTitle} // Mode box footer={null} // Mode box click on the upper right corner to close the mode box onCancel={() => setpreviewVisible(false)} > {/* Mode box opens to show the currently clicked image */} <img alt="example" style={{ width: < img SRC ={previewImage} /> < img SRC ={previewImage} /> < img SRC ={previewImage} /> < img SRC ={previewImage} /> < img SRC ={previewImage} /> < img SRC ={previewImage} /> "0 5px"}} onClick={() => {// Clear the route to the image path setImageUrl(); SetFileList ([]); </Button> </p> </>); } export default TableTwo;Copy the code