GuanJdoJ
GuanJdoJ

如何用React同步提交文件

1、UI

如何用React同步提交文件_第1张图片

2、代码

import React from 'react';
import { Upload, Button, Input } from 'antd';
import axios from 'axios';

const { TextArea } = Input;

class Post extends React.Component {
    state = {
        fileList: [],//文件列表
        textAreaValue: '',//文本值
    };

    //发布
    handleUpload = () => {
        const { fileList, textAreaValue } = this.state;
        const formData = new FormData();
        fileList.forEach((file) => {
            formData.append('files[]', file);
        });
        formData.append('text', textAreaValue);
        axios.post(
            'xxx',//接口url
            formData,
            { headers: { 'Content-Type': 'multipart/form-data' } },
        );
        /*也可以使用dispatch发请求，不过要注意根据不同项目中axios封装情况添加contentType
        this.props.dispatch({
            type:'post/submit',//model中的方法
            payload:formData,
        });*/
    };

    //获取textArea值
    handleGetValue = (event) => {
        this.setState({
            textAreaValue: event.target.value,
        });
    };

    render() {
        const props = {
            //移除文件
            onRemove: (file) => {
                const { fileList } = this.state;
                const index = fileList.indexOf(file);
                const newFileList = fileList.slice();
                newFileList.splice(index, 1);
                this.setState({
                    fileList: newFileList,
                });
            },
            //上传文件前操作
            beforeUpload: (file) => {
                this.setState(state => ({
                    fileList: [...state.fileList, file],
                }));
                return false;
            },
        };

        return (