La recepción en segundo plano de la carga de archivos múltiples de Antd es un problema nulo
Durante el proceso de desarrollo del uso de antd, la carga del componente de carga generalmente se configura a través de la acción para configurar la dirección de la interfaz de back-end, y el archivo se carga automáticamente; sin embargo, cuando el la cantidad de archivos es grande, se requiere carga manual, pero se requiere carga manual. El fondo no ha podido recibir datos, los datos son nulos.
Implementación del código
El código del componente front-end es el siguiente:
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 lógico de carga frontal:
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 fondo:
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];
}
}
}
复制代码
Analice
F12 para ver el encabezado de la solicitud:
F12 para ver los parámetros de entrada:
Debido a que la interfaz se puede ajustar, siempre pensé que el backend convertía los datos en nulos al procesar los datos,
Después de resolver
Baidu:
al definir el analizador de archivos MultipartResolver, estableció la propiedad resolveLazily en verdadero (el valor predeterminado es falso). Es posible que MultipartResolver resuelva automáticamente la solicitud de forma predeterminada cuando initBinder y borre el contenido de la secuencia de archivos, de modo que la solicitud en el controlador no pueda obtener la información de la secuencia de archivos. Pero después de realizar los ajustes pertinentes en Internet, sigue sin funcionar, sigue siendo nulo.
Cuando usé cartero para probar la interfaz, resultó estar bien. Me di cuenta de que podría no ser un problema con el backend. Miré cuidadosamente el encabezado de la solicitud y los parámetros de entrada, y descubrí que el tipo de parámetro enviado era [ objeto Objeto]. Rompí el punto y miré la lista de archivos:
Resulta que fileLsit no es una matriz de objetos File, originFileObj es el archivo real. Modificar el código:
fileList.forEach((file) => {
formData.append('files', file.originFileObj, file.name);
});
复制代码
Efectivamente, tuvo éxito, y finalmente las lágrimas llenaron el lado opuesto ~~~, revisa la entrada
Resumen
Eche un vistazo más de cerca a la documentación de antd
FileList es de hecho una matriz de objetos de archivo
Pero lea atentamente las preguntas frecuentes para averiguarlo.
Finalmente
, si crees que este artículo es un poco útil para ti, dale un pulgar hacia arriba. O puede unirse a mi grupo de intercambio de desarrollo: 1025263163 para aprender unos de otros, tendremos preguntas técnicas profesionales respondiendo
Si cree que este artículo es útil para usted, dele una pequeña estrella a nuestro proyecto de código abierto: http://github.crmeb.net/u/defu ¡Muchas gracias!
Manual de estudio de PHP: https://doc.crmeb.com
Foro de intercambio técnico: https://q.crmeb.com