react hook + antd upload 通过fileList控制文件列表展示status为uploading |
您所在的位置：网站首页 › 怎么让所有文件列表展示 › react hook + antd upload 通过fileList控制文件列表展示status为uploading |
react hook + antd upload 通过fileList控制文件列表展示status为uploading
|
项目是用的react hook写的,引入了antd 的upload上传组件,页面效果如下
代码 import React, { useState } from 'react' import { Modal, Form, Upload, message, Button } from 'antd' import { UploadOutlined } from '@ant-design/icons' import { TableListItem } from '@/services/data.d' import { importByExcelUrl } from '@/services/manually' import { validFileSize } from '@/utils/validate' export interface FormValueType extends Partial { time?: string; [propName: string]: any } const FormItem = Form.Item interface CreateFormProps { modalVisible: boolean; onCancel: () => void; onConfirm: (values: FormValueType) => void; values: any } const formLayout = { labelCol: { span: 7 }, wrapperCol: { span: 13 }, } const UploadForm: React.FC = (props) => { const { modalVisible, onConfirm, onCancel } = props const [bussinessFileList, setFilelist] = useState([]) const [uploadFileList, setUploadFilelist] = useState([]) const [form] = Form.useForm() form.setFieldsValue({}) const uploadprops = { name: 'file', action: importByExcelUrl(), headers: { authorization: 'authorization-text', }, accept: '.csv,.xls,.xlsx, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel', data: { businessCode: props.values }, disabled: bussinessFileList.length === 1, fileList: uploadFileList, beforeUpload(file: any) { // console.log(6, file, uploadFileList.length, validFileSize(file)) if (uploadFileList.length > 0) { message.warning('只能上传一个文件') return false } if (file.size === 0) { message.error('文件不能为空') return false } return validFileSize(file) }, onChange(info: any) { let files: any[] = [...info.fileList] if (info.file.status === 'done') { if (info.file.response) { if (info.file.response.responseCode === '000000') { // files = [...info.fileList] message.success(`${info.file.name} 文件上传成功`) } else { message.error(info.file.response.responseMsg) } } else { message.error(`${info.file.name} 上传失败.`) } } else if (info.file.status === 'error') { message.error(`${info.file.name} 上传失败.`) } files = files.filter((item : any) => { return item.response?.responseCode === '000000' }) files = JSON.parse(JSON.stringify(files)) console.log(66666, info, files) setUploadFilelist(files) setFilelist(files) }, } const renderContent = () => { return ( { if (value && value.fileList && value.fileList.length) { console.log(77, value) if (value.file.response && value.file.response.responseCode === '000000') { callback() } else if (value.file.status && value.file.status === 'uploading') { callback() } else { callback('文件信息有误,请删除后上传正确文件') } } else callback('请选择文件上传') } }]} > 点击上传 ) } const handleConfirm = async() => { const fieldsValue = await form.validateFields() // console.log(fieldsValue) onConfirm(fieldsValue) } return ( handleConfirm()} maskClosable={false} onCancel={() => onCancel()} > {renderContent()} ) } export default UploadForm想做到的效果是用户文件上传正确,才展示在页面上,上传错误不展示在页面上.使用了upload的fileList属性,发现文件上传状态一直是uploading
在官网找了一圈答案https://github.com/ant-design/ant-design/issues/2423这个issue里有问题描述,试了里面的一些方法还是不起作用 后面发现实际问题是,fileList这个属性不能设置为空数组
这里已经说得很明白了,所以说想用这个属性来控制文件,就必须保证不会为空数组,但是这个跟我的需求不符,所以后来没用这个属性,是用form的rules来提示客户删除不正确的文件重新上传 但是如果一定要实现这个功能可以自己写fileList { if (value && value.fileList && value.fileList.length) { console.log(77, value) if (value.file.response && value.file.response.responseCode === '000000') { callback() } else if (value.file.status && value.file.status === 'uploading') { callback() } else { callback('文件信息有误,请删除后上传正确文件') } } else callback('请选择文件上传') } }]} > 点击上传 {bussinessFileList.length ? // 大概的就是这样,具体样式自己要调整一下 {bussinessFileList.map(item => {item.name} )} : null}这样写要注意一个问题,formtien默认值会获取内部的一个闭合标签的值,这里加了列表之后,form rules里面的value将会获取不到file上传的内容,可以换成bussinessFileList判断 |
【本文地址】
今日新闻 |
推荐新闻 |