antd Upload 上传多张图片 react hooks

父组件模板：

import UploadComponent from "./component";<Col span={24}><Form.ItemclassName={styles.uploadImgItem}label="Image"name="uploadPhoto"//用了预览的组件,手动绑定图片路径,NONO！rules={rulesObj.Image}><UploadComponent />//这个是上传图片的组件！</Form.Item></Col>

上传图片的重要组件：

import React, { useState, useEffect } from "react";
import { Upload, Modal, message } from 'antd';
import { requestUrl, getUploadFileType, MessageError, MessageSuccess } from '../../../../utils/utils';
import { v4 as uuidv4 } from 'uuid';
import { PlusOutlined } from "@ant-design/icons";
import styles from "./index.less";
export default (props) => {const [fileList, setFileList] = useState([])const [previewVisible, setPreviewVisible] = useState(false);const [previewImage, setPreviewImage] = useState('');useEffect(() => {if (props.value) {let newFileList = props.value.map((item, index) => {return {uid: item.id,id: item.id,url: item.url,}})setFileList(newFileList)//把每一个返回回来的 图片item 处理好后 放入DileList}}, [props])const handleChange = ({ file, fileList }) => {fileList = fileList.map((file) => {if (file.response) {const { response } = filefile.uid = response.DocumentId;file.id = response.DocumentId;file.url = `${ATTACHMENT_URL}${response.UploadPath}`//预览}return file;});if (file.status !== undefined) {if (file.status === 'done') {console.log('上传成功')// console.log(fileList);triggerChange(fileList);} else if (file.status === 'error') {console.log('上传失败')} else if (file.status === 'removed') {if (typeof file.uid === 'number') {//请求接口，删除已经保存过的图片，并且成功之后triggerChangetriggerChange(fileList);} else {//只是上传到了服务器，并没有保存，直接riggerChangetriggerChange(fileList);}}}setFileList([...fileList]);}const triggerChange = (value) => {const onChange = props.onChange;if (onChange) {onChange(value);//将改变的值 传给父组件}};const uploadButton = (<div><PlusOutlined /><div className="ant-upload-text">Upload</div></div>);const uploadImages = {action: requestUrl + '/api/common/CommonUpload',headers: {SessionKey: `${localStorage.getItem('sk')}`,},accept:".jpeg,.png,.jpg",listType:"picture-card",data: (file) => {return {UploadType: 1027,//后端定义的typeId: uuidv4(),FileType: getUploadFileType(file),};},beforeUpload: (file) => {// 礼品imageconst limitFileNameLen = 100;return new Promise((resolve, reject) => {if (file.name && file.name.length > limitFileNameLen) {message.error('Please upload a file with a file name less than 100 characters');//请上传文件名不超过100个字符的文件return Promise.reject();}const limitM = 2;const isLimit = file.size / 1024 / 1024 <= limitM;console.log(isLimit);if (!isLimit) {message.error('The size exceeds the limit');return Promise.reject();}return resolve();});},onPreview :(file) => {setPreviewImage(file.url);setPreviewVisible(true);}}return (<divclassName={styles.box}><Upload{...uploadImages}fileList={fileList}onChange={handleChange}>{fileList.length >= 4 ? null : uploadButton}</Upload><Modalvisible={previewVisible}title='preview'footer={null}onCancel={() => setPreviewVisible(false)}><img alt="Network fault" style={{ width: '100%' }} src={previewImage} /></Modal><span >建议尺寸750*350，支持jpg/jpeg、png格式图片,小于2M</span></div>);
};

antd Upload 上传多张图片 react hooks相关推荐

【Antd Design Upload】 antd Upload 上传时只有Uploading状态，无法获取返回的数据
问题:antd Upload 上传时只触发Uploading状态,无法获取服务器返回的response,根据控制台的结果发现只有一种Uploading,上传图片时只触发了一次. 根据官网可以知道.上传 ...
ant react 上传_React实战之Ant Design—Upload上传_附件上传
React实战之Ant Design-Upload上传_附件上传 Upload组件大家都在官方文档中看过了,但写的时候还是会遇到许多问题,一些新手看了文档后感觉无从下手,本文过多的简绍就不说了,直接看 ...
antd 图片上传遇到的坑----图片回显（Upload）
antd 图片上传遇到的坑----图片回显(Upload) 最近又被安排了一个前端的项目,遇到了一个图片上传的问题,用的是antd的Upload组件,在这遇到的问题和大家分享一下,下网可以帮到需要的人 ...
Egg整合antd文件上传以及防踩坑指南
Egg整合antd文件上传以及防踩坑指南前言一. 项目编写二. 注意事项 2.1 清理缓存 2.2 antd的Upload组件得到的事件对象问题 2.3 关于onChange事件的注意前言最 ...
高手教你PHP上传多张图片
高手教你PHP上传多张图片对于我们来说上传一张图片是非常简单的事情,这里教大家一个关于PHP上传多张图片的代码分析,希望对大家有帮助. 学习PHP时,你可能会遇到PHP上传多张图片问题,这里将介绍P ...
okhttp上传图片和其他参数_Android中Okhttp3实现上传多张图片同时传递参数_放手_前端开发者...
之前上传图片都是直接将图片转化为io流传给服务器,没有用框架传图片. 最近做项目,打算换个方法上传图片. Android发展到现在,Okhttp显得越来越重要,所以,这次我选择用Okhttp上传图片. ...
微信小程序-上传多张图片加进度，持续修正中……
tips.参考网上资料的改进版 1.怎么使用.html <up-picurl="{{u ...
el upload ajax,Upload 上传 el-upload 上传配置请求头为Content-Type: multipart/form-data
api接口处添加属性 (标红处) // 校验台账 export const checkEquiment = (data) => { return axios({ url: '/job/equip ...
elementui展示多张图片_elementUI 上传多张图片并预览大图左右切换
前段时间项目需求中涉及到上传多张图片当条信息查看时可预览大图功能,项目框架vue.js+elementUI,抽时间在此做个整理记录,如有更好的方法欢迎大家互相交流页面列表更多操作-修改-先选择图 ...

antd Upload 上传多张图片 react hooks

antd Upload 上传多张图片 react hooks相关推荐

最新文章

热门文章