Use antD ‘Upload’ to Upload a file.

The code looks like this:

const uploadProps = { action: createTheURL('software/stu/score', 'upload'), method: 'POST', headers: { authorization: tokenHandler.getSessionByKey('authorization') }, onRemove: This.handleremove} < form. Item label=' appendix' >{getFieldDecorator(' Appendix ', {initialValue: JSON.parse(appendix) || [], valuePropName: 'fileList', })(<Upload {... uploadProps} > <a style={{ marginRight: </span> </Upload>)} </ form.item >Copy the code

The reason for this problem is that after uploading a file, there will be a new fileList, but this new fileList is not returned to the fileList of the Upload component. Therefore, the problem can be solved by adding a new fileList to the Upload.

The first thing you do is put a fileList in state. Then every time you Upload a file, it triggers the onChange function of the Upload. Inside the onChange function, use setState to store a new fileList package in state. Finally, place a fileList in the state file in the Upload.

The code looks something like this:

handleChange = info => { const { fileList } = info; this.setSate({ fileList }); } render(){ const { fileList } = this.state; const uploadProps = { action: createTheURL('software/stu/score', 'upload'), method: 'POST', headers: { authorization: tokenHandler.getSessionByKey('authorization') }, fileList, onRemove: this.handleRemove, onChange: this.handleChange }; Return (< form. Item label=' attachment '> <Upload {... uploadProps} > <a style={{ marginRight: 20}}> <Icon type="plus" /> </a> <span>Copy the code

However, there are still some problems with writing this, which is just to handle new form data; However, if you want to make a change to the uploaded form data, there will be a problem. In the process of modification, we need to obtain the submitted data first. For uploaded files, we need to obtain the file name first, generate fileList and store it in the state, and then put it in the Upload component. If we write in this way, we will find that the whole process is very chaotic and may not be completely ok.

Final solution:

Use the antD Form getValueFromEvent method. The function of this method is to pass the parameters of onChange back to the Upload (file and fileList are included here).

Antd Form component

The code I wrote is as follows:

const uploadProps = { action: createTheURL('software/stu/score', 'upload'), method: 'POST', headers: { authorization: tokenHandler.getSessionByKey('authorization') }, onRemove: This.handleremove} < form. Item label=' appendix' >{getFieldDecorator(' Appendix ', {initialValue: JSON.parse(appendix) || [], valuePropName: 'fileList', getValueFromEvent: e => { if (Array.isArray(e)) { return e; } return e && e.fileList; } })(<Upload {... uploadProps} > <a style={{ marginRight: </span> </Upload>)} </ form.item >Copy the code