Ant-design: Upload file.status siempre se está cargando

Mi prueba actual no es un problema ¿Es conveniente dar el código completo del problema para una fácil reproducción?

Re-dirección:
http://codepen.io/xiongying/pen/jAGRvx?editors=0011

Para el modo controlado, siempre debe establecer Estado fileList en onChange para asegurarse de que todos los estados estén sincronizados para cargar. Similar a la redacción aquí: http://ant.design/components/upload/#components -upload-demo-fileList

// good

onFileChange(fileList) {
  if ( ... ) {
    ...
  } else {
    ...
  }
  // always setState
  this.setState({ fileList: [...fileList] });
}

...

<Upload fileList={this.state.fileList} onChange={this.onFileChange} />

// bad

onFileChange(fileList) {
  if ( ... ) {
    this.setState({ fileList: [...fileList] });
  } else {
    ...
  }
}

...

<Upload fileList={this.state.fileList} onChange={this.onFileChange} />

Se recomienda estudiar el concepto de componentes controlados: https://facebook.github.io/react/docs/forms.html#controlled -components

Tenga en cuenta que debe clonar fileList para asegurarse de que Upload pueda detectar cambios en la matriz.

- this.setState({ fileList });
+ this.setState({ fileList: [...fileList] });

e0a986ed71cd87e506fb8e4ee5e2e0130fc70ae1

¿Por qué uso el control de carga para siempre fallar al cargar y siempre informar un error: POST http: // localhost : 8081 / api / nes / 2 / uploadMusic / r_ty 404 (no encontrado)

¿Cómo agregar campos de identidad y tokens a URL restringidas? ¿Cómo usar acciones para pasarlos? La acción solo proporciona la dirección, ¿no puede agregar datos?

Todavía hay un problema en React.PureComponent porque React.PureComponent ha realizado una capa de juicios de optimización, filelist tiene referencias en caché y no se actualizará si es el mismo objeto, y se debe generar un nuevo objeto inmediatamente en React.PureComponent
handleChange = ({fileList}) => {
// error corregido
this.setState ({fileList: fileList.slice ()});
}

@ afc163

@yongningfu Gracias por la sugerencia, se ha actualizado.

Recordatorio especial: al usar React shouldComponentUpdate para una comparación superficial, en el modo controlado, incluso si el estado está sincronizado con Upload, no se actualizará. La razón es que la referencia es congruente ===, lo que evita el renderizado

Cargue varias imágenes, beforeUpload establece el límite del parámetro de carga de imágenes, onChange obtiene una lista de imágenes que se cargaron correctamente, después de cargar algunas imágenes con éxito, cargar una imagen incorrecta borrará todas las imágenes que se cargaron correctamente antes, ¿hay alguna solución? ?

Cuando vuelva a llamar, debe restablecer el estado, como this.setState ({fileList});

handleChange = (info) => {
console.log (información);

    //把fileList拿出来
    let {fileList} = info;

    const status = info.file.status;
    if (status !== 'uploading') {
        console.log(info.file, info.fileList);
    }
    if (status === 'done') {
        message.success(`${info.file.name} file uploaded successfully.`);
    } else if (status === 'error') {
        message.error(`${info.file.name} file upload failed.`);
    }

    //重新设置state
    this.setState( {fileList});
}

Entonces, mientras el estado cambie, onChange se llamará internamente, ¿verdad?

Este problema se ha enfrentado durante mucho tiempo y resultó ser setState. Los componentes no deberían diseñarse así, ¿por qué confiar en el estado externo perezoso?

Solo quiero el código base64, sin interactuar con el fondo, ¿cómo resolver el problema de enviar solicitudes automáticamente al fondo?

¿Es una escultura de arena para mantener este componente?

Si la carga falla y quiero mostrar la imagen predeterminada anterior, ¿qué debo hacer?

La carga falló. En la función de procesamiento de errores, llama
this.setState ({
fileList: intial_list
})
Puede mostrar la imagen predeterminada anterior

Creo que puede haber un problema con el tiempo de ejecución de la devolución de llamada cuando se completa la carga del componente. Intente considerar esta situación:

Pseudocódigo de relación de componentes:

<Controller>
  <Upload fileList={controller.state.fileList} onUpload={controller.onUpload} />
</Controller>

Se notifica al componente principal Controller que actualice el estado a través de onUpload .

Pero debido a que la actualización del estado de React es asincrónica, si la carga de la imagen es lo suficientemente rápida, el orden de ejecución aparecerá como
constroller.onUpload(会调用 controller.setState) -> upload.onSuccess -> upload.componentWillReceiveProps
En el caso de la ejecución upload.onSuccess , no hay un archivo cargado correspondiente en el estado de carga. Porque la actualización de upload state.fileList depende de componentWillReceiveProps .

Por lo tanto, creo que el modo controlado actual de este componente no es confiable.

Soluciones posibles:

1. En modo controlado, la lógica de procesamiento real de onSuccess y otros eventos ponen componentDidUpdate conducidos
2. Evitar state.fileList es completamente dependiente de props.fileList , mantiene una lista de archivos relativamente independiente (y no el estado de la instancia de componente instance.state) en una instancia de instancia de componente, facilidad de manejo de carga de eventos

let {archivo, lista de archivos} = info;
if (file.size / 1024/1024> 10) {
regreso
}
console.log (archivo.status)
if (file.status! = "done") {
fileList = []
}
this.setState ({
fileList,
}, console.log (
this.state.fileList,
this.props.form.getFieldValue ('cargar')
))
当 我 添加

let {archivo, lista de archivos} = info;
if (file.size / 1024/1024> 10) {
regreso
}
console.log (archivo.status)
if (file.status! = "done") {
fileList = []
}
this.setState ({
fileList,
}, console.log (
this.state.fileList,
this.props.form.getFieldValue ('cargar')
))
Cuando agrego
if (file.status! = "done") {
fileList = []
}
Monitoree onchange una vez, simplemente elimínelo.

Este problema no está resuelto, ¿verdad?

Llamar a setState durante el ciclo de vida de componentWillReceiveProps para mostrar la imagen no cambiará

componentWillReceiveProps = (nextProps) => {
    this.setState(() => ({ 
      fileList: [...nextProps.fileList] 
    }));
  }  
// ...
<Upload FileList={this.state.fileList} ...>
//...

Cuando el componente de carga

@PTGuan Por supuesto, este componente se carga uno por uno, y la API de back-end también se recibe un archivo uno por uno. Debe llamar a upload de forma recursiva en la devolución de llamada después de que la carga sea exitosa para cargar en lotes. Espero terminar con tu pregunta.

Este problema no se resuelve +1

antd 3.8+ todavía solo tiene status = estado de 'cargando', y no hay estado hecho, ¿cómo resolverlo?

¿Existe alguna solución oficial para cargar todo el tiempo, pero onSuccess puede esperar la respuesta http200 correcta?

El problema ha sido resuelto, this.setState ({fileList: [... fileList]}); Esta oración es muy importante, enfóquese en esto si tiene problemas

@EnixCoda , parece que me he encontrado con el problema que describiste, y ocasionalmente lo subo y siempre muestra "Subiendo".

@withzhaoyu Bueno, de hecho, la mayoría de las personas aquí se encuentran con este problema. Este componente no es muy confiable para almacenar el progreso de carga a través del estado React.

¡Cómo resolverlo! ! ! ! ! ! ! ! ! ! Ha estado subiendo

Encuentro +1

handleUploaderChange = ({file, fileList}) => {
  console.log('file vo =>', file, fileList);
  if (file.status === 'done') {
    fileList = fileList.map((item, index) => {
      // 相关文件对象数据格式化处理
      return item;
    });
  }
   // 避免原来的文件丢失，这样子写就可以了
  this.setState({ fileList: file.status ? [...fileList] : this.state.fileList });
};

// 上传进度可以通过onProgress中的percent来控制样式，而不是file.status
handleProgress = (event, file) => {
  let {fileList} = this.state;
  fileList = fileList.map(item => {
    if (item.uid === file.uid) {
      item.percent = event.percent;
    }
    return item;
  });
  this.setState({fileList});
};

Qué hacer siempre que lea la base64 del archivo sin interactuar con el fondo

@ pingping92

handleChange = ({ file, fileList }) => {
  const { dispatch, nickname } = this.props;
  const reader = new FileReader();
  reader.onload = e => {
    const base64 = e.target.result;
  };
  reader.readAsDataURL(file.originFileObj);
}

<Upload
  onChange={this.handleAvatarChange}
/>

@AngryPowman , puede encapsular otro componente basado en este componente usted mismo, ¿qué más no se puede satisfacer en términos de función?

Pregunte débilmente aquí, ¿es un diseño deliberado no proporcionar URL para archivos recién cargados?

Divertidísimo. Ahora el estado en la lista de archivos todavía se está cargando, incluso si se controla, todavía configuro el estado en carga.El problema no se resuelve en absoluto

¿Puedo preguntar si el indicador de error de carga de archivos se devuelve desde el backend -> file.response.status, el componente no se intercepta en este momento, y cuando voy a hecho, se muestra la lista de archivos. Quiero borrar la lista de archivos a través del indicador devuelto por el backend ¿Cómo hacerlo?

// Pisé el pozo y miré el código fuente y encontré que los problemas que usé son los siguientes
// 1 nombre de variable de estado
// malo

/*
这里为了方便 使用了与后端返回同样的字段 导致出了问题 这里必须用fileList，不然源码中 this.state.fileList获取是空 就会导致在onSuccess中匹配失败，从而不会在触发第二次onChange事件
*/
state = {imgList:[]} 
<Upload fileList={this.state.imgList} onChange={this.onFileChange} />

// bienes

state = {fileList:[]} 
<Upload fileList={this.state.fileList} onChange={this.onFileChange} />

// 2. El parámetro de onFileChange es un obj (incluidos dos atributos de file y fileList) y this.setState ({fileList: [... fileList]}); se debe llamar en la función onFileChange

state = {fileList:[]} 
onFileChange({file,fileList}) {
  if ( ... ) {
    ...
  } else {
    ...
  }
  // always setState
  this.setState({ fileList: [...fileList] });
}
<Upload fileList={this.state.fileList} onChange={this.onFileChange} />

¿Algún inglés por casualidad? Tengo este problema.

@developdeez ¿cuál es tu problema? ¿Qué versión de Ant Design estás usando?
Usé AntD 3.0 antes y trabajé en este componente de carga durante unos meses. Todo me fue bien. No he tenido ningún problema. Tuve algunos problemas al principio, pero finalmente los arreglé todos. Así que tengo la suficiente confianza para resolver todos los problemas comunes.

@swordguard , Ant 3.9.3

Básicamente, el problema es no poder controlar la lista de archivos de la interfaz de usuario. Subo una imagen y he intentado borrarla con un botón y no tuve suerte.

También hice un ticket aquí con un código de muestra: https://github.com/ant-design/ant-design/issues/12722#event -1913716771

¿Has podido hacer esto?

En el caso de pit +1, probé this.setState({ fileList: [...fileList] }) vano, PureComponent cambia a Component y no hay diferencia, el estado solo se detiene en la carga a menos que fileList no se incluya en los accesorios, por favor pregunte mucho

En el caso de pit +1, probé this.setState({ fileList: [...fileList] }) vano, PureComponent cambia a Component y no hay diferencia, el estado solo se detiene en la carga a menos que fileList no se incluya en los accesorios, por favor pregunte mucho

Puede intentar definir fileList como una cadena ~~ == ~~
// siempre setState
this.setState ({fileList: JSON.stringify ([info.file])});

@ pingping92

handleChange = ({ file, fileList }) => {
  const { dispatch, nickname } = this.props;
  const reader = new FileReader();
  reader.onload = e => {
    const base64 = e.target.result;
  };
  reader.readAsDataURL(file.originFileObj);
}

<Upload
  onChange={this.handleAvatarChange}
/>

Este problema no se ha resuelto. No hay atributo originFileObj en el objeto de archivo. ¿Este atributo solo aparece después de la carga? Pero ahora no hay ningún plan para cargar en segundo plano y obtener directamente el contenido base64.

this.setState({ fileList: [...fileList] }); Aunque esto puede solucionar el problema mostrado por el cliente

Pero de acuerdo con la demanda, después de que se carga el archivo, el fondo devuelve una identificación de archivo. Cuando hago clic en enviar, necesito devolver la identificación, pero el estado siempre se está cargando, por lo que no puedo obtener la respuesta de la interfaz de fondo.
@ afc163

El mismo problema aquí. En el componente Upload , se llama a la devolución de llamada en la propiedad action pero el argumento UploadFile viene con un originFileObj vacío, es decir, undefined . ¿Alguna pista de cómo leer el contenido del archivo usando el componente Upload ant sin cargar el archivo en el backend?

El mismo problema aquí. En el componente Upload , se llama a la devolución de llamada en la propiedad action pero el argumento UploadFile viene con un originFileObj vacío, es decir, undefined . ¿Alguna pista de cómo leer el contenido del archivo usando el componente Upload ant sin cargar el archivo en el backend?

En realidad, no necesita originFileObj, solo use el objeto de archivo. Creo que han eliminado originFileObj

Estoy aquí porque quería asegurarme de no agregar archivos a mi lista que no se hayan cargado correctamente. En otras palabras, si mi file.status === "error" no quiero mostrar ese archivo en la interfaz de usuario (ciertamente, no quiero enviar ese archivo defectuoso en la solicitud). Traté de controlar eso trabajando con mi propio componente controlado y aprovechando fileList . Me encontré con el problema de que el estado del archivo nunca cambia de "cargar".

Así que volví a no usar un componente controlado debido a este problema. Pude obtener la solicitud deseada asegurándome de que normFile solo agregue archivos que no sean "error".

normFile = (e) => {
    if (Array.isArray(e)) {
      return e.filter(x => x.status !== "error");
    }
    return e && e.fileList.filter(x => x.status !== "error");
  };

const generationRequestDecorator = getFieldDecorator('generationRequest', {
      rules: [
        {
          required: true,
          message: 'Please upload your config'
        }
      ],
      valuePropName: 'fileList',
      getValueFromEvent: this.normFile,
    });

const props = {
      name: 'file',
      action: '/api/to/upload',
      multiple: true,
      onChange(info) {
        if (info.file.status !== 'uploading') {
          console.log(info.file, info.fileList);
        }
        if (info.file.status === 'done') {
          message.success(`${info.file.name} file uploaded successfully`);
        } else if (info.file.status === 'error') {
          message.error(`${info.file.name} file upload failed.`);
        }
      },
    };

const generationRequestArea = generationRequestDecorator(
      <Upload {...props}>
        <Button>
          <Icon type="upload"/> Click to Upload
        </Button>
      </Upload>
    );

Nuevamente, espero sinceramente que el equipo de antd pueda considerar mi sugerencia (anteriormente escrita aquí ):

mantener los estados de carga de archivos en la instancia Upload lugar del estado de la instancia. porque el estado no siempre se actualiza sincrónicamente.

Detrás de mí, los datos devueltos en segundo plano se mostrarán por separado en la página, Upload siempre almacenará la última carga

@yoonwaiyan
`handleChange = (info) => {
let fileList = info.fileList;
this.setState ({fileList: fileList.slice ()});
if (info.file.status === 'hecho') {
message.success (info.file.name + "carga exitosa");
fileList = fileList.slice (-1);
fileList = fileList.map ((archivo) => {
if (file.response) {
file.url = file.response. # verifique su respuesta y elija su propia URL desde el servidor #;
}
archivo de retorno;
});

  fileList = fileList.filter((file) => {
    if (file.response) {
      return file.response.#check your respone and choose your own respone status code back from server# === 200;
    }
    return false;
  });

  this.setState({ fileList });
} else if (info.file.status === 'error') {
  message.error(info.file.name + " upload failed");
}

} `

prueba esto.

También encontré este problema. Después de una ola de pruebas, sentí que se había encontrado el problema. Explique:

handleChange = info => {
    let fileList = info.fileList;
    fileList.filter(file => file.status === 'done');
    this.setState({fileList});
}

La situación de prueba incluye: Si realiza directamente this.setState({fileList}) en handleChange, se ejecuta normalmente.

Mi escritura anterior es similar a esta. Después de filtrar, conduce a la primera ejecución, filtrando la lista de archivos en una matriz vacía. Por lo tanto, siempre hay un solo estado de carga.
Creo que el problema es que después de la carga, si configura manualmente fileList en una matriz vacía, afectará la ejecución continua del evento onChange. Después de modificar ligeramente las condiciones del filtro, el problema encontrado está realmente resuelto.

¿Existe alguna relación vinculante entre estas dos propiedades bajo mantenimiento oficial? @Imxiongying

Además, en el caso oficial, existe un caso de filtrado (lista de carga de control total) .Me pregunto si hay algún problema con mi red. Este caso también tiene esta situación.

También encontré este problema. Después de una ola de pruebas, sentí que se había encontrado el problema. Explique:

handleChange = info => {
    let fileList = info.fileList;
    fileList.filter(file => file.status === 'done');
    this.setState({fileList});
}

La situación de prueba incluye: Si realiza directamente this.setState({fileList}) en handleChange, se ejecuta normalmente.

Mi escritura anterior es similar a esta. Después de filtrar, conduce a la primera ejecución, filtrando la lista de archivos en una matriz vacía. Por lo tanto, siempre hay un solo estado de carga.
Creo que el problema es que después de la carga, si configura manualmente fileList en una matriz vacía, afectará la ejecución continua del evento onChange. Después de modificar ligeramente las condiciones del filtro, el problema encontrado está realmente resuelto.

¿Existe alguna relación vinculante entre estas dos propiedades bajo mantenimiento oficial? @Imxiongying

Además, en el caso oficial, existe un caso de filtrado (lista de carga de control total) .Me pregunto si hay algún problema con mi red. Este caso también tiene esta situación.

En una situación controlada, establezca fileList en vacío en la devolución de llamada onChange, y fileList dentro del componente Upload se actualizará a una matriz vacía. En su lógica interna onSuccess, onProgress y otra lógica, el archivo que desencadenó el evento se encontrará en fileList. Activar la devolución de llamada al cambiar

@luruozhou Uhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh , es así

@yidianier handleProgress ¿Dónde se llama esta función?

@yidianier handleProgress ¿Dónde se llama esta función?

onProgress = {this.handleProgress}

Los componentes controlados y los componentes dependientes puramente externos se utilizan en sus propios escenarios. Los componentes controlados se controlan lógicamente en ant, como hacer clic en el espacio en blanco para cancelar el cuadro desplegable. Si todos se controlan externamente, se sentirá especial Problema, por lo que el componente controlado es parte de la lógica básica, no un problema en el diseño del componente, así que no se queje. . .

@todas

@ afc163

@yidianier handleProgress ¿Dónde se llama esta función?

onProgress = {this.handleProgress}

Gracias

Este problema también ocurrirá en 3.13.1 @ afc163

@ xiaolong1024 https://github.com/ant-design/ant-design/pull/14780

@ xiaolong1024 # 14780

Este problema persiste. ¿Está relacionado con la forma rc?

handleUploaderChange = ({file, fileList}) => {
  console.log('file vo =>', file, fileList);
  if (file.status === 'done') {
    fileList = fileList.map((item, index) => {
      // 相关文件对象数据格式化处理
      return item;
    });
  }
   // 避免原来的文件丢失，这样子写就可以了
  this.setState({ fileList: file.status ? [...fileList] : this.state.fileList });
};

// 上传进度可以通过onProgress中的percent来控制样式，而不是file.status
handleProgress = (event, file) => {
  let {fileList} = this.state;
  fileList = fileList.map(item => {
    if (item.uid === file.uid) {
      item.percent = event.percent;
    }
    return item;
  });
  this.setState({fileList});
};

Esta respuesta resolvió mi problema！

En la versión 3.13.0, operar this.setState ({fileList}) en onChange después de empaquetar hará que se cancele la solicitud de carga, lo cual es normal en el entorno de desarrollo, y no se puede determinar el motivo.

Se ha corregido

Me gustaría preguntarle al autor, no puedo obtener la respuesta en fileOBJ y el fileid devuelto por el backend después de subirlo. Tengo la misma situación, estado === subiendo

`import React, {Component} from 'react';
importar {Cargar, Icono} desde 'antd';
importar {urlMapToFileList, fileListTourlMap} desde '@ / utils / utils';
importar {upLoadFile} desde '@ / services / api';

class UploadForm extiende Componente {
static defaultProps = {
hideCheckAll: falso,
};

constructor (accesorios) {
super (accesorios);
console.log (urlMapToFileList (props.value));
this.state = {
filesList: urlMapToFileList (props.value) || urlMapToFileList (props.defaultValue) || [],
// valor: urlMapToFileList (props.value) || urlMapToFileList (props.defaultValue) || [],
};
}

onChange = value => {
const {onChange} = this.props;
if (onChange) {
const selfValue = fileListTourlMap (valor);
onChange (selfValue.length? selfValue: null);
}
};
handleChange = (datos) => {
const {archivo} = datos;
const {fileList} = datos;
console.log ('handleChange', file.status);
if (file.status === 'hecho') {
depurador
const {respuesta} = archivo;
if (respuesta && respuesta.exito) {
file.url = response.result.url;
fileList.pop ();
fileList.push (archivo);
}
}
if (file.status === 'error') {
fileList.pop ();
}

if(!file.status) {
  fileList = fileList.filter(ele => ele.url)
}
this.setState({filesList: fileList});
this.onChange(fileList);

}

render () {
const {lista de archivos} = this.state;
regreso (

aceptar = "imagen / *"
encabezados = {{'x-Access-Token': localStorage.getItem ('token')}}
action = "/ api / admin / file / upload"
listType = "tarjeta de imagen"
fileList = {filesList}
onChange = {this.handleChange}
{... this.porps}
>
{filesList.length> = 1? nulo:

exportar UploadForm predeterminado;
'
这种 控制 上传 数量 ， 但 上传 状态 一直 为 subiendo 是 啥 原因？
@ afc163

Aunque es un problema antiguo hace unos años, pero hoy también pisé los pozos y hablé sobre los pozos que encontré. Si usa React.PureComponent para crear componentes, tenga en cuenta que pasará el ciclo de vida shouldComponentUpdate de forma predeterminada. Para una comparación superficial, la dirección de referencia del estado de su lista de archivos no ha cambiado, por lo que el componente de carga no cambiará.

let fileList = info.fileList;
/ * Aquí necesita cambiar la referencia de fileList * /
fileList = JSON.parse (JSON.stringify (fileList));
this.setState ({fileList: fileList});

3.16.1 La carga todavía tiene problemas, el cambio solo se realiza una vez, se recomienda actualizar

Necesita this.setState ({fileList: fileList.slice ()}) de esta manera

3.16.2 Al usar React Hook, fileList debe copiarse en profundidad en el cambio de carga, puede usar lodash _.cloneDeep (fileList)

Integre mobx, use dos componentes de carga en un modal y defina dos listas de archivos en la tienda correspondiente. Uno de los eventos onChange de Upload pasa por el proceso de carga normal (se reciben tanto los estados de carga como de hecho), Pero el otro fue decepcionante. Solo se cargaba todo el tiempo y solo se podía resolver de esta manera
修改前: this.fileList[0] = file; 修改后: this.fileList = []; this.fileList.push(file);
Y, si this.fileList proviene de una clase heredada, la forma modificada no funcionará

if (status === 'error') {
    message.success(`${file.name} upload failed.`);
    const fileList = this.state.fileList.filter(file => !file.error);
    this.setState({
        fileList
    }, () => {
        console.log(this.state.fileList)
    })
}

Quiero eliminar el elemento de visualización fallido cuando falla. ¿Por qué no cambia el estado de esta manera?

El archivo console.log es correcto, el estado está vacío, pero las herramientas de desarrollo aún están disponibles y también se muestran las imágenes de carga fallidas.

https://github.com/ant-design/ant-design/issues/2423#issuecomment -491143417

this.setState({
    fileList:[...fileList]
}

¿Cómo agregar campos de identidad y tokens a URL restringidas? ¿Cómo usar acciones para pasarlos? La acción solo proporciona la dirección, ¿no puede agregar datos?

Puede colocarse en el encabezado

se solucionó mi problema con este truco

Tenía un sistema de creación de entrada dinámica, por lo que con los nuevos accesorios dinámicos puedes decirle a antd sobre los accesorios entrantes

Me lo arregló cuando comencé a usar React.Component lugar de React.PureComponent .

Cuando uso modal.info y control filelist, onChange solo se llama una vez. Pero cuando elimino Modal, funciona

pueden

1: Utilice React.Component
2: Preste atención para verificar si fileList está configurado en getDerivedStateFromProps y si está configurado correctamente.
3: fileList: this.state.fileList
4: onChange: ({archivo, lista de archivos}) => {
this.setState ({fileList});
}

3.19.7 todavía tiene este problema

Publico un caso exitoso para su referencia. Sin embargo, he tenido este problema antes. También calcule aquí tome nota, para facilitarse la búsqueda conveniente olvidada más tarde

env:

• antd: 4.0.0-rc.1
• pro-layout: 5.0.0
• reaccionar: 16.9.17

import React, { useState } from 'react';
import { Modal, Upload, Button, message } from 'antd';
import { UploadOutlined } from '@ant-design/icons/lib';
import { UploadProps } from 'antd/lib/upload';
import { deleteArtifact } from '@/services/artifact';

interface UploadModalType {
  visible: boolean
  onCancel: () => void
  projectId: number
}

const UploadModal: React.FC<UploadModalType> = props => {
  const { visible, onCancel, projectId } = props;
  const [fileList, setFileList] = useState();

  const uploadProps: UploadProps = {
    name: 'file',
    fileList,
    listType: 'text',
    action: 'http://localhost:8080/v1/artifacts',
    data: { project_id: projectId, type: 'application/json' },
    onChange(info) {

      setFileList(info.fileList.slice()); // Note: A new object must be used here!!!

      if (info.file.status === 'done') {
        message.success(`${info.file.name} file uploaded successfully`);
      } else if (info.file.status === 'error') {
        message.error(`${info.file.name} file upload failed.`);
      }
    },
    onRemove(file) {
      const promise: PromiseLike<void | boolean> = deleteArtifact({ filename: file.response });
      promise.then((value: any) => {
        if (value === '' || value instanceof Response && value.status === 205) {
          const index = fileList.indexOf(file);
          const newFileList = fileList.slice();
          newFileList.splice(index, 1);
          setFileList(newFileList);
        }
      });
    },
  };

  return (
    <Modal
      destroyOnClose
      title='上传归档文件'
      visible={visible}
      onCancel={onCancel}
    >
      <Upload
        {...uploadProps}
      >
        <Button>
          <UploadOutlined/> Click to Upload
        </Button>
      </Upload>
    </Modal>
  );
};

export default UploadModal;

Qué desastre, el estado de carga debe establecerse en fileList, de lo contrario, solo se ejecutará una vez y, después de un largo período de lanzamiento, se quedará sin palabras.

Publico un caso exitoso para su referencia. Sin embargo, he tenido este problema antes. También calcule aquí tome nota, para facilitarse la búsqueda conveniente olvidada más tarde

env:

• antd: 4.0.0-rc.1
• pro-layout: 5.0.0
• reaccionar: 16.9.17

import React, { useState } from 'react';
import { Modal, Upload, Button, message } from 'antd';
import { UploadOutlined } from '@ant-design/icons/lib';
import { UploadProps } from 'antd/lib/upload';
import { deleteArtifact } from '@/services/artifact';

interface UploadModalType {
  visible: boolean
  onCancel: () => void
  projectId: number
}

const UploadModal: React.FC<UploadModalType> = props => {
  const { visible, onCancel, projectId } = props;
  const [fileList, setFileList] = useState();

  const uploadProps: UploadProps = {
    name: 'file',
    fileList,
    listType: 'text',
    action: 'http://localhost:8080/v1/artifacts',
    data: { project_id: projectId, type: 'application/json' },
    onChange(info) {

      setFileList(info.fileList.slice()); // Note: A new object must be used here!!!

      if (info.file.status === 'done') {
        message.success(`${info.file.name} file uploaded successfully`);
      } else if (info.file.status === 'error') {
        message.error(`${info.file.name} file upload failed.`);
      }
    },
    onRemove(file) {
      const promise: PromiseLike<void | boolean> = deleteArtifact({ filename: file.response });
      promise.then((value: any) => {
        if (value === '' || value instanceof Response && value.status === 205) {
          const index = fileList.indexOf(file);
          const newFileList = fileList.slice();
          newFileList.splice(index, 1);
          setFileList(newFileList);
        }
      });
    },
  };

  return (
    <Modal
      destroyOnClose
      title='上传归档文件'
      visible={visible}
      onCancel={onCancel}
    >
      <Upload
        {...uploadProps}
      >
        <Button>
          <UploadOutlined/> Click to Upload
        </Button>
      </Upload>
    </Modal>
  );
};

export default UploadModal;

Tengo el mismo problema al usar el componente Func. Info.status siempre tiene estado de carga y onChange llama solo una vez

Se ha corregido

3.13.5 También tengo el mismo problema. La operación this.setState ({fileList}) en onChange hará que se cancele la solicitud de carga

Si no utiliza su interfaz de acción, después de la carga, habrá un estado de carga siempre, debe configurar manualmente el estado de cada archivo como hecho

Si no utiliza su interfaz de acción, después de la carga, habrá un estado de carga siempre, debe configurar manualmente el estado de cada archivo como hecho

Compruebe si se utiliza el nuevo objeto cuando fileList escribe el estado, [... fileList]

OK gracias

---Original---
De: "Amumu" < [email protected]>
Fecha: Dom, 26 de julio de 2020 17:59 PM
Para: "diseño de hormiga / diseño de hormiga" < [email protected]>;
Cc: "Comentario" < [email protected]>; "SCLGIS" < [email protected]>;
Asunto: Re: [ant-design / ant-design] Subir archivo. El estado siempre se está cargando (# 2423)

Si no utiliza su interfaz de acción, después de la carga, habrá un estado de carga siempre, debe configurar manualmente el estado de cada archivo como hecho

Compruebe si se utiliza el nuevo objeto cuando fileList escribe el estado, [... fileList]

-
Estás recibiendo esto porque comentaste.
Responda a este correo electrónico directamente, véalo en GitHub o cancele la suscripción.

No funciona si uso ganchos con las opciones "múltiples" habilitadas.
Si selecciono 3 archivos, obtengo 2 en la lista. Si selecciono 5 archivos, obtengo solo 3, a veces 4. Si elimino la propiedad "fileList", funciona bien y puedo ver todos los archivos de la lista, pero no puedo controlarlos; necesito usar la propiedad "fileList".
Tengo un comportamiento diferente si uso el componente de clase en lugar del gancho useState.

También encontré este problema en 4.5.1, y siempre se ha estado cargando.Probé los métodos mencionados por los grandes antes, pero fueron inútiles. Finalmente, miré el código fuente y descubrí que era porque el valor clave del componente de carga era diferente cada vez que estaba renderizando, lo que llevó a volver a renderizar. El código fuente canceló la solicitud de carga anterior de forma predeterminada, lo que resultó en una constante Es el estado de la carga, el valor de la clave es fijo y luego se puede cargar con éxito.

Se ha corregido

3.13.5 También tengo el mismo problema. La operación this.setState ({fileList}) en onChange hará que se cancele la solicitud de carga