A recepção em segundo plano de upload de vários arquivos do Antd é nula problema
Durante o processo de desenvolvimento do uso do antd, o upload do componente Upload geralmente é configurado através da ação para configurar o endereço da interface de back-end, e o arquivo é carregado automaticamente; no entanto, quando o o número de arquivos é grande, o upload manual é necessário, mas o upload manual é necessário. O plano de fundo não conseguiu receber dados, os dados são nulos.
Implementação do código
O código do componente front-end é o seguinte:
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>
复制代码
Código de lógica de upload de front-end:
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('上传图片失败');
},
});
复制代码
Código de back-end:
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];
}
}
}
复制代码
Analise
F12 para visualizar o cabeçalho da solicitação:
F12 para visualizar os parâmetros de entrada:
Como a interface pode ser ajustada, sempre pensei que o backend convertia os dados em null ao processar os dados,
Após resolver o
Baidu:
Ao definir o analisador de arquivos MultipartResolver, você definiu a propriedade resolveLazily como true (o valor padrão é false). Pode ser que o MultipartResolver resolva automaticamente a solicitação por padrão quando initBinder e limpe o conteúdo do fluxo de arquivo, para que a solicitação no controlador não possa obter as informações de fluxo de arquivo. Mas depois de fazer configurações relevantes na Internet, ainda não funciona, ainda é nulo.
Quando usei o carteiro para testar a interface, tudo funcionou. Percebi que talvez não fosse um problema com o back-end. Analisei cuidadosamente o cabeçalho da solicitação e os parâmetros de entrada e descobri que o tipo de parâmetro enviado era [ object Object]. Eu quebrei o ponto e olhei para o fileList:
Acontece que fileLsit não é um array de objetos File, originFileObj é o File real. Modifique o código:
fileList.forEach((file) => {
formData.append('files', file.originFileObj, file.name);
});
复制代码
Com certeza, foi bem sucedido, e finalmente as lágrimas encheram o lado oposto~~~, verifique a entrada
Resumo
Dê uma olhada na documentação do antd
FileList é de fato uma matriz de objetos File
Mas leia atentamente o FAQ para descobrir
Finalmente
, se você acha que este artigo é um pouco útil para você, dê um joinha. Ou você pode participar do meu grupo de intercâmbio de desenvolvimento: 1025263163 para aprender uns com os outros, teremos perguntas técnicas profissionais respondendo
Se você acha que este artigo é útil para você, por favor, dê uma pequena estrela ao nosso projeto de código aberto: http://github.crmeb.net/u/defu Muito obrigado!
Manual de estudo PHP: https://doc.crmeb.com
Fórum de intercâmbio técnico: https://q.crmeb.com