您好,登錄后才能下訂單哦!
本篇內(nèi)容主要講解“react使用antd的上傳組件實(shí)現(xiàn)文件表單一起提交功能”,感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷,實(shí)用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“react使用antd的上傳組件實(shí)現(xiàn)文件表單一起提交功能”吧!
項(xiàng)目中需要實(shí)現(xiàn)表單中帶附件提交,上傳文件不單獨(dú)保存調(diào)接口。
import { Form, Button, Upload } from 'antd'; import { UploadOutlined } from '@ant-design/icons'; const normFile = (e) => { console.log('Upload event:', e); if (Array.isArray(e)) { return e; } return e && e.fileList; }; const Demo = () => { const onFinish = (values) => { console.log('Received values of form: ', values); }; return ( <Form name="validate_other" onFinish={onFinish} initialValues={{ 'input-number': 3, 'checkbox-group': ['A', 'B'], rate: 3.5, }} > <Form.Item name="upload" label="Upload" valuePropName="fileList" getValueFromEvent={normFile} > <Upload name="logo" action="/upload.do" listType="picture"> <Button icon={<UploadOutlined />}>Click to upload</Button> </Upload> </Form.Item> </Form> ); }; ReactDOM.render(<Demo />, mountNode);
這里是一個(gè)表單里面包含了一個(gè)上傳文件功能。(其實(shí)這里的代碼就是Antd官方文檔的例子,我只進(jìn)行了刪除多余部分,別的都是原樣放著)。
下面做一下解釋。
首先我們要思考怎么實(shí)現(xiàn)讓文件不要自動上傳。antd文檔是有給一個(gè)方法的就是beforeUpload,當(dāng)beforeUpload方法返回false時(shí)就會停止文件的上傳。
以上就可以停止文件的自動上傳。接下來,我們考慮怎么把上傳的文件獲取并存在傳給后端的參數(shù)中。
這部分代碼就是上傳代碼的方法,因?yàn)槲覀冃枰蟼魑募捅韱我黄鹛峤弧K晕覀冊谶@個(gè)方法里進(jìn)行一些修改,把文件存在formData對象里。這里先說明一下formData對象,主要就是用來傳文件給后端用的。
先new一個(gè)formData對象,在把文件append進(jìn)去,這樣就已經(jīng)把上傳的文件存在了formData里。
表單中其它數(shù)據(jù)也可以通過同種方法存在formData中,把formData傳給后端即可。
此時(shí)還有一個(gè)需要注意的問題。
fetch(url, { //fetch請求 method: 'POST', body: formData, })
或
axios({ //axios method: 'post', url: url, data: formData, }) .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); });
一定要設(shè)置了,才可以傳參數(shù)成功,不然調(diào)用接口的時(shí)候是不會成功帶參數(shù)的。
什么樣子是成功帶了參數(shù)呢,可以在相關(guān)頁面點(diǎn)擊F12查看,network,最下方會有Form Data,一欄,會展示所有傳過去的參數(shù)。
最終代碼如下:
import { Form, Button, Upload } from 'antd'; import { UploadOutlined } from '@ant-design/icons'; const normFile = (e) => { console.log('Upload event:', e); if (Array.isArray(e)) { return e; } return e && e.fileList; }; const beforeUpload = ({fileList}) => { return false; } const Demo = () => { const onFinish = (values) => { console.log('Received values of form: ', values); }; return ( <Form name="validate_other" onFinish={onFinish} initialValues={{ 'input-number': 3, 'checkbox-group': ['A', 'B'], rate: 3.5, }} > <Form.Item name="upload" label="Upload" valuePropName="fileList" getValueFromEvent={normFile} > <Upload name="logo" beforeUpload={beforeUpload} > <Button icon={<UploadOutlined />}>Click to upload</Button> </Upload> </Form.Item> </Form> ); }; ReactDOM.render(<Demo />, mountNode);
到此,相信大家對“react使用antd的上傳組件實(shí)現(xiàn)文件表單一起提交功能”有了更深的了解,不妨來實(shí)際操作一番吧!這里是億速云網(wǎng)站,更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢,關(guān)注我們,繼續(xù)學(xué)習(xí)!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。