react使用antd的上傳元件實現檔案表單一起提交功能(完整程式碼)
阿新 • • 發佈:2021-06-30
最近在剛剛開始使用react做專案,非常不熟練,非常小白。小白同學可以閱讀了,因為我會寫的非常簡單,直白。
專案中需要實現表單中帶附件提交,上傳檔案不單獨儲存調介面。
import { Form,Button,Upload } from 'antd';
import { UploadOutlined } from '@ant-design/iconswww.cppcns.com';
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);
這裡是一個表單裡面包含了一個上傳檔案功能。(其實這裡的程式碼就是Antd官方文件的例子,我只進行了刪除多餘部分,別的都是原樣放著)。
下面做一下解釋。
首先我們要思考怎麼實現讓檔案不要自動上傳。antd文件是有給一個方法的就是beforeUpload,當beforeUpload方法返回false時就會停止檔案的上傳。
以上就可以停止檔案的自動上傳。接下來,我們考慮怎麼把上傳的檔案獲取並存在傳給後端的引數中。
這部分程式碼就是上傳程式碼的方法,因為我們需要上傳檔案和表單一起提交。所以我們在這個方法裡進行一些修改,把檔案存在formData物件裡。這裡先說明一下formData物件,主要就是用來傳檔案給後端用的。
先new一個formData物件,在把檔案append進去,這樣就已經把上傳的檔案存在了formData裡。
表單中其它資料也可以通過同種方法存在formData中,把formData傳給後端即可。
此時還有一個需要注意的問題。
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); });
一定要設定了,才可以傳引數成功,不然呼叫介面的時候是不會成功帶引數的。
什麼樣子是成功帶了引數呢,可以在相關頁面點選F12檢視,network,最下方會有Form Data,一欄,會展示所有傳過去的引數。
最終程式碼如下:
import { Form,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: ','Bwww.cppcns.com'],}}
>
<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的上傳元件實現檔案表單一起提交的文章就介紹到這了,更多相關react實現檔案表單提交內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們!