Antd multi-file upload background reception is null problem
During the development process of using antd, the upload of the Upload component is generally configured through the action to configure the back-end interface address, and the file is automatically uploaded; however, when the number of files is large, manual upload is required, but manual upload is required. The background has been unable to receive data, the data is null.
Code implementation
The front-end component code is as follows:
const onRemove = (file) => {
this.setState((state) => {
const index = state.fileList.indexOf(file);
const newFileList = state.fileList.slice();
newFileList.splice(index, 1);
return {
fileList: newFileList,
};
});
};
const beforeUpload = (file) => {
const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
if (!isJpgOrPng) {
message.error('请上传图片格式文件!');
return isJpgOrPng || Upload.LIST_IGNORE;
}
this.setState(state => ({
fileList: [...state.fileList, file],
}));
return false;
};
<Upload
fileList={
fileList}
onRemove={
onRemove}
beforeUpload={
beforeUpload}
directory
accept=".png,.jpg,.jpeg"
showUploadList={
false}
onChange={
this.onChange}
>
<Button
icon={
<UploadOutlined />}
>
Click to upload
</Button>
</Upload>
复制代码
Front-end upload logic code:
const formData = new FormData();
// 组装数据
fileList.forEach((file) => {
formData.append('files', file);
});
formData.append('id', galleryId);
// 保存图片请求接口
reqwest({
// 上传url
url: 'url',
method: 'post',
// 必须false才会避开jQuery对 formdata 的默认处理
processData: false,
// 必须false才会自动加上正确的Content-Type
contentType: false,
data: formData,
success: (res) => {
message.success('上传图片成功');
},
error: () => {
message.error('上传图片失败');
},
});
复制代码
Backend code:
public Message insertPic(@RequestParam(value = "files", required = true) MultipartFile[] files) {
// 判断file数组不能为空并且长度大于0
if (files != null && files.length > 0) {
//循环获取file数组中得文件
for (int i = 0; i < files.length; i++) {
MultipartFile file = files[i];
}
}
}
复制代码
Analyze
F12 to view the request header:
F12 to view the input parameters:
Because the interface can be adjusted, I always thought that the backend converted the data into null when processing the data,
After solving
Baidu:
When defining the file parser MultipartResolver, did you set the resolveLazily property to true (the default value is false). It may be that the MultipartResolver will automatically resolve the request by default when initBinder, and clear the content of the file stream, so that the request in the controller cannot obtain the file stream information. But after making relevant settings on the Internet, it still doesn't work, it is still null.
When I used postman to test the interface, it turned out to be ok. I realized that it might not be a problem with the backend. I carefully looked at the request header and input parameters, and found that the type of parameter sent was [object Object]. I broke the point and looked at the fileList:
It turns out that fileLsit is not an array of File objects, originFileObj is the real File. Modify the code:
fileList.forEach((file) => {
formData.append('files', file.originFileObj, file.name);
});
复制代码
Sure enough, it was successful, and finally tears filled the opposite side~~~, check the entry
Summary
Take a closer look at the antd documentation
FileList is indeed an array of File objects
But read the FAQ carefully to find out
Finally
, if you think this article is a little bit helpful to you, give it a thumbs up. Or you can join my development exchange group: 1025263163 to learn from each other, we will have professional technical answering questions
If you think this article is useful to you, please give our open source project a little star: http://github.crmeb.net/u/defu Thank you very much!
PHP Study Manual: https://doc.crmeb.com
Technical Exchange Forum: https://q.crmeb.com