Shulou(Shulou.com)05/31 Report--

In this article Xiaobian for you to introduce in detail "react how to use antd upload component to achieve file form submission function", detailed content, clear steps, details handled properly, I hope that this "react how to use antd upload component to achieve file form submission function" article can help you solve doubts, the following Xiaobian ideas slowly in-depth, together to learn new knowledge bar.

In the project, you need to submit with attachments in the form, and the uploaded files are not saved separately.

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 (Click to upload);}; ReactDOM.render (, mountNode)

Here is a form that contains a file upload function. (in fact, the code here is an example of the official Antd documentation. I only deleted the extra parts and left everything else as is).

Let's explain.

First of all, we need to think about how to make sure that files are not uploaded automatically. One method for antd documents is beforeUpload, which stops uploading files when the beforeUpload method returns false.

The above can stop the automatic upload of files. Next, we consider how to get the uploaded file and store it in the parameters passed to the backend.

This part of the code is the way to upload the code, because we need to upload the file and submit it with the form. So we make some changes in this method to store the file in the formData object. Here we first explain the formData object, which is mainly used to pass files to the back end.

First new a formData object, and then append the file, so that the uploaded file has been stored in formData.

Other data in the form can also be stored in formData in the same way, and the formData can be passed to the backend.

There is another problem that needs to be paid attention to at this time.

Fetch (url, {/ / fetch request method: 'POST', body: formData,})

Or

Axios ({/ / axios method: 'post', url: url, data: formData,}) .then (function (response) {console.log (response);}) .catch (function (error) {console.log (error);})

It must be set before parameters can be passed successfully, otherwise the parameters will not be successfully taken when calling the API.

What looks like successfully with parameters, you can click F12 on the relevant page to view, network, the bottom will be Form Data, a column will show all the parameters passed in the past.

The final code is as follows:

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 (Click to upload);}; ReactDOM.render (, mountNode) Read this, the "react how to use antd upload component to achieve file form submission function" article has been introduced, want to master the knowledge of this article also need to practice and use in order to understand, if you want to know more about the article, welcome to pay attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.