上传文件

设定只准上传一个文件

文件数据存放

//保存上传的文件信息列表（本例中该数组长度最大为1）
const [fileList, setFileList] = useState([]);

使用upload组件

// 需要引入的包
import { Upload, Button } from 'antd';
import { UploadOutlined } from '@ant-design/icons';

// 写在return内
<Upload {...fileProps} fileList={fileList} >
    <Button icon={<UploadOutlined />} >上传文件</Button>
</Upload>

upload API配置： fileProps

const fileProps = {
    name: 'file',
    multiple: true,
    action: '',
    defaultFileList: fileList,
    beforeUpload: () => {
        return false;
    },
    onChange(info) {
        const { status } = info.file;
        setFileList([])
        if (status !== 'removed') {
            setFileList([{
                uid: info.fileList[info.fileList.length - 1].uid,
                name: info.fileList[info.fileList.length - 1].name,
            }])
        }
    },

};

调用后端接口上传

uploadFile上传文件后，返回地址URL， saveNeed保存整个表单

const onFinish = (values) => { //提交表单触发onFinish函数
    // console.log('Received values of form: ', values);
    if (values.file && values.file.file) {
        const formData = new FormData();
        formData.append('file', values.file.file) //文件上传格式
        uploadFile(formData).then(res => {
            new Promise((resolve, _) => {
                resolve(res)
            }).then(savedfile => {
                saveNeed({
                    appendixUrl: savedfile.url,
                    appendixName: savedfile.oriName,
                    name: values.name,
                }).then(() => {
                    router.push('/iplatform/personNeed')
                })
            })
        })
    } else { // 在表单里文件可选上不上传，不上传文件时
        saveNeed({
            name: values.name,
        }).then(() => {
            router.push('/iplatform/personNeed') // 可选，提交表单的后续操作，退回上一个页面
        })
    }
};

上传图片

设定只上传一个图片

保存数据

const [fileList, setFileList] = useState([]);

使用组件

import { Upload, Button } from 'antd';
import ImgCrop from 'antd-img-crop';


<ImgCrop rotate>
    <Upload
        action=""
        listType="picture-card"
        fileList={fileList}
        onChange={onChange}
        onPreview={onPreview}
    >
        {fileList.length < 1 && '+ 上传logo '}
    </Upload>
</ImgCrop>

const onChange = ({ fileList: newFileList }) => {
    setFileList(newFileList);
};

const onPreview = async file => {
    let src = file.url;
    if (!src) {
        src = await new Promise(resolve => {
            const reader = new FileReader();
            reader.readAsDataURL(file.originFileObj);
            reader.onload = () => resolve(reader.result);
        });
    }
    const image = new Image();
    image.src = src;
    const imgWindow = window.open(src);
    imgWindow.document.write(image.outerHTML);
};

调用后端接口

uploadFile上传图片，saveintermediary提交整个表单

const onFinish = (values) => {
    if (fileList.length) {
        const formData = new FormData();
        formData.append('file', fileList[0].originFileObj)
        uploadFile(formData).then(res => {
            new Promise((resolve, _) => {
                resolve(res)
            }).then(savedfile => {
                saveintermediary({
                    ...values,
                    logoImage: savedfile.url,
                }).then(()=>{
                    router.push('/iplatform/media')
                })
            })
        })
    }else{
        saveintermediary({
            ...values,
        }).then(()=>{
            router.push('/iplatform/media')
        })
    }
}