AntD Upload With Form / Multipart-form

공부는 혼자하는 거·2022년 6월 23일
0

React Tip

목록 보기
24/24
import {
    Form,
    Input,
    Button,
    Radio,
    Select,
    Cascader,
    DatePicker,
    InputNumber,
    TreeSelect,
    Switch,
    Checkbox, Upload, UploadProps,
} from 'antd';
const {TextArea} = Input;



  const onFinish = async (values: any) => {
        console.log('Success:', values);
        const form = new FormData()
        for (const [key, value] of Object.entries(values)) {
            if (value === undefined) {
                continue;
            }
            if (key === "songFile") {
                console.log("songFile", values[key])
                form.append(key, values[key].fileList[0]?.originFileObj);
                continue;
            }
            console.log("why???", key)
            form.append(key, values[key]);
        }

        try {
            const promise = await postSongApi(form);
            console.log("promise", promise);
            navigate("/songs");
        } catch (err) {
            alert("업로드에 실패하였습니다.")
            throw err;
        }
    };

    const onFinishFailed = (errorInfo: any) => {
        console.log('Failed:', errorInfo);
    };

    const uploadProps: UploadProps = {
        //maxCount: 1,
        //multiple: false,
        onRemove: file => {
            const index = fileList.indexOf(file);
            const newFileList = fileList.slice();
            newFileList.splice(index, 1);
            setFileList(newFileList);
        },
        beforeUpload: file => {
            setFileList([...fileList, file]);
            return false;
        },
        fileList,
    };

    		<Form
                    labelCol={{span: 4}}
                    wrapperCol={{span: 14}}
                    layout="horizontal"
                    onValuesChange={onFormLayoutChange}
                    onFinish={onFinish}
                    onFinishFailed={onFinishFailed}
                    disabled={componentDisabled}
                >
     

                    <Form.Item
                        label="Name"
                        name="name"
                        rules={[{required: true, message: 'Please input your song name!'}]}>
                        <Input/>
                    </Form.Item>

                    

                    <Form.Item
                        label="audioType"
                        name={"audioType"}>
                        <Select>
                            {(Object.keys(AudioType) as Array<keyof typeof AudioType>)?.map((audioType: any, index: any) => (
                                <Select.Option key={index} value={audioType}>{audioType}</Select.Option>
                 
                            ))}
                        </Select>
                    </Form.Item>

                    <Form.Item
                        label="copyRightHolder"
                        name="copyRightHolder"
                    >
                        <Input/>
                    </Form.Item>

                    <Form.Item
                        label="음원"
                        name={"songFile"}>
                        <Upload {...uploadProps}>
                            <Button icon={<UploadOutlined/>}>Select File</Button>
                        </Upload>
                    </Form.Item>

                    <Form.Item
                        label="duration"
                        name="duration">
                        <InputNumber/>
                    </Form.Item>
     
                    <Form.Item
                        label="desc"
                        name="desc">
                        <TextArea rows={4}/>
                    </Form.Item>

                    <Form.Item label="Button">
                        <Button htmlType="submit">등록</Button>
                    </Form.Item>
                </Form>

profile
시간대비효율

0개의 댓글