Ant-design: Upload file.status está sempre sendo enviado

Meu teste real não é problema. É conveniente fornecer o código completo do problema para facilitar a reprodução?

Re-endereçar:
http://codepen.io/xiongying/pen/jAGRvx?editors=0011

Para o modo controlado, você deve sempre setState fileList em onChange para garantir que todos os estados sejam sincronizados para Upload. Semelhante ao texto aqui: 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} />

Recomenda-se estudar o conceito de componentes controlados: https://facebook.github.io/react/docs/forms.html#controlled -components

Observe que você precisa clonar fileList para garantir que o Upload possa detectar as alterações do array.

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

e0a986ed71cd87e506fb8e4ee5e2e0130fc70ae1

Por que uso o controle Upload para sempre falhar no upload e sempre relatar um erro: POST http: // localhost : 8081 / api / nes / 2 / uploadMusic / r_ty 404 (não encontrado)

Como adicionar campos de identidade e tokens a URLs restritos? Como usar ações para transferi-los? A ação só dá endereços, você não pode adicionar dados?

Ainda há um problema em React.PureComponent porque React.PureComponent fez uma camada de julgamentos de otimização. A filelist tem referências em cache. Se for o mesmo objeto, não será atualizado. Um novo objeto deve ser gerado imediatamente em React.PureComponent.
handleChange = ({fileList}) => {
// bug corrigido
this.setState ({fileList: fileList.slice ()});
}

@ afc163

@yongningfu Obrigado pela dica, ela foi atualizada.

Lembrete especial: Ao usar o React shouldComponentUpdate para comparação superficial, no modo controlado, mesmo se o estado estiver sincronizado para Upload, ele não será atualizado. A razão é que a referência é congruente ===, o que impede a renderização

Depois de enviar várias imagens, beforeUpload define o limite do parâmetro de upload de imagens, onChange obtém a lista de imagens que foram enviadas com sucesso, depois de enviar algumas imagens com sucesso, enviar uma imagem incorreta irá limpar todas as imagens que foram enviadas com sucesso antes. Existe alguma solução? ?

Ao ligar de volta, você deve redefinir o status, como this.setState ({fileList});

handleChange = (info) => {
console.log (informações);

    //把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});
}

Portanto, enquanto o estado mudar, onChange será chamado internamente, certo?

Esse problema foi enfrentado por muito tempo e acabou sendo setState. Os componentes não devem ser projetados dessa forma, por que confiar no estado externo preguiçoso?

Só quero o código base64 e não interajo com o background.Como resolver o problema do envio automático de requisições para o background?

É uma escultura de areia para manter este componente?

Se o upload falhar e eu quiser exibir a imagem padrão anterior, o que devo fazer?

O upload falhou. Na função de processamento de erros, chame
this.setState ({
fileList: intial_list
})
Pode exibir a imagem padrão anterior

Acho que pode haver um problema com o tempo de execução do retorno de chamada quando o upload do componente for concluído. Tente considerar esta situação:

Pseudocódigo de relacionamento do componente:

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

O componente pai Controller é notificado para atualizar o estado por meio de onUpload .

Mas, como a atualização de estado do React é assíncrona, se o upload da imagem for rápido o suficiente, a ordem de execução aparecerá como
constroller.onUpload(会调用 controller.setState) -> upload.onSuccess -> upload.componentWillReceiveProps
No caso da execução de upload.onSuccess , não há arquivo enviado correspondente no estado de upload. Porque a atualização do upload state.fileList depende de componentWillReceiveProps .

Portanto, acho que o modo controlado atual deste componente não é confiável.

Soluções possíveis:

1. No modo controlado, a lógica de processamento real onSuccess e outros eventos colocam componentDidUpdate conduzidos
2. Evite state.fileList é completamente dependente de props.fileList , mantém um relativamente independente da fileList (e não do estado da instância do componente instance.state) em uma instância da instância do componente, facilidade de manipulação de upload de eventos

deixe {file, fileList} = info;
if (file.size / 1024/1024> 10) {
Retorna
}
console.log (arquivo.status)
if (file.status! = "feito") {
fileList = []
}
this.setState ({
fileList,
}, console.log (
this.state.fileList,
this.props.form.getFieldValue ('upload')
))
当 我 添加

deixe {file, fileList} = info;
if (file.size / 1024/1024> 10) {
Retorna
}
console.log (arquivo.status)
if (file.status! = "feito") {
fileList = []
}
this.setState ({
fileList,
}, console.log (
this.state.fileList,
this.props.form.getFieldValue ('upload')
))
Quando eu adiciono
if (file.status! = "feito") {
fileList = []
}
Monitore o onchange uma vez, apenas remova-o. Por que isso?

Esse problema não está resolvido, certo

Chamar setState durante o ciclo de vida do componentWillReceiveProps para exibir a imagem não mudará

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

Quando o componente de upload

@PTGuan Claro, este componente é carregado um por um, e a API de back-end também é recebida um por um arquivo.Você precisa chamar upload recursivamente no retorno de chamada após o upload ser bem-sucedido para upload em lotes. Espero encerrar sua pergunta.

Este problema não está resolvido +1

antd 3.8+ ainda tem apenas o status = 'carregando', e não há estado concluído, como resolver isso?

Existe uma solução oficial para enviar o tempo todo, mas onSuccess pode esperar pela resposta http200 correta

O problema foi resolvido, this.setState ({fileList: [... fileList]}); Esta frase é muito importante, por favor concentre-se nisso se tiver problemas

@EnixCoda , parece que encontrei o problema que você descreveu e, ocasionalmente, faço o upload e ele sempre mostra "Upload".

@withzhaoyu Bem, na verdade, a maioria das pessoas aqui está enfrentando esse problema. Este componente não é muito confiável para armazenar o progresso do upload por meio do estado React.

Como resolver! ! ! ! ! ! ! ! ! ! Tem carregado

Encontro +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});
};

O que fazer contanto que você leia a base64 do arquivo sem interagir com o fundo

@ 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 , você pode encapsular outro componente com base neste componente, o que mais não pode ser satisfeito em termos de função

Pergunte fracamente aqui, é um projeto deliberado que o arquivo recém-carregado não forneça url por padrão?

Hilário. Agora o status na lista de arquivos ainda está carregando, mesmo se for controlado, eu ainda defino o status como enviando.O problema não está resolvido de todo

Desculpe-me, o sinalizador de falha de upload de arquivo é retornado do back-end -> file.response.status. Neste momento, o componente não foi interceptado. Quando eu for concluído, a lista de arquivos foi exibida. Quero limpar a lista de arquivos por meio do sinalizador retornado do back-end Como fazer isso?

// Eu pisei no poço e olhei o código-fonte e descobri que os problemas que usei são os seguintes
// 1. nomeação de variável de estado
// ruim

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

// mercadorias

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

// 2. O parâmetro de onFileChange é um obj (incluindo dois atributos de arquivo e fileList) e this.setState ({fileList: [... fileList]}); deve ser chamado na função onFileChange

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

Qualquer inglês por acaso? Eu tenho esse problema para.

@developdeez qual é o seu problema? qual versão do Ant Design você está usando?
Eu usei AntD 3.0 antes e trabalhei neste componente de upload por alguns meses. Tudo correu bem para mim. Eu não tive nenhum problema remanescente. Tive alguns problemas no início, mas acabei consertando todos eles. Portanto, estou confiante o suficiente para resolver todos os problemas comuns.

@swordguard , Ant 3.9.3

O problema é basicamente não conseguir controlar a lista de arquivos da IU. Eu carreguei uma imagem e tentei limpar usando um botão e sem sorte.

Fiz um tíquete aqui também com um código de amostra: https://github.com/ant-design/ant-design/issues/12722#event -1913716771

Você conseguiu fazer isso?

No caso do pit +1, tentei this.setState({ fileList: [...fileList] }) sem sucesso, PureComponent muda para Component e o status só para no upload, a menos que fileList não seja colocado nos props.

No caso do pit +1, tentei this.setState({ fileList: [...fileList] }) sem sucesso, PureComponent muda para Component e o status só para no upload, a menos que fileList não seja colocado nos props.

Você pode tentar definir fileList como uma string ~~ == ~~
// sempre 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 não foi resolvido. Não há atributo originFileObj no objeto de arquivo. Esse atributo aparece apenas após o upload? Mas agora não há planos de fazer upload para o plano de fundo e obter diretamente o conteúdo base64.

this.setState({ fileList: [...fileList] }); Embora isso possa resolver o problema apresentado pelo cliente

Mas de acordo com a demanda, depois que o arquivo é carregado, o plano de fundo retorna um id de arquivo. Quando clico em enviar, preciso retornar o id, mas o status é sempre o upload, então não posso obter a resposta da interface de plano de fundo.
@ afc163

Mesmo problema aqui. No componente Upload o retorno de chamada na propriedade action está sendo chamado, mas o argumento UploadFile vem com um originFileObj vazio, ou seja, undefined . Alguma idéia de como ler o conteúdo do arquivo usando o componente Upload ant sem enviar o arquivo para o backend?

Mesmo problema aqui. No componente Upload o retorno de chamada na propriedade action está sendo chamado, mas o argumento UploadFile vem com um originFileObj vazio, ou seja, undefined . Alguma idéia de como ler o conteúdo do arquivo usando o componente Upload ant sem enviar o arquivo para o backend?

Na verdade, você não precisa de originFileObj, apenas use o objeto de arquivo. Eu acho que eles removeram originFileObj

Estou aqui porque queria ter certeza de que não adicionei arquivos à minha lista que não tiveram êxito no upload. Em outras palavras, se meu file.status === "error" não quiser exibir esse arquivo na IU (certamente, não quero enviar esse arquivo com defeito na solicitação). Tentei controlar isso trabalhando com meu próprio componente controlado e aproveitando fileList . Corri para o referido problema de status do arquivo nunca mudando de "upload".

Então, voltei a não usar um componente controlado por causa desse problema. Consegui obter a solicitação desejada certificando-me de que normFile só adiciona arquivos que não são de "erro".

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>
    );

Mais uma vez, espero sinceramente que a equipe antd possa considerar minha sugestão (anteriormente escrita aqui ):

manter estados de upload de arquivo em Upload instância ao invés do estado da instância. bc o estado nem sempre é atualizado de forma síncrona!

Atrás de mim, os dados retornados do plano de fundo serão renderizados separadamente na página, Upload sempre armazenará o upload mais recente

@yoonwaiyan
`handleChange = (info) => {
let fileList = info.fileList;
this.setState ({fileList: fileList.slice ()});
if (info.file.status === 'concluído') {
message.success (info.file.name + "upload bem-sucedido");
fileList = fileList.slice (-1);
fileList = fileList.map ((arquivo) => {
if (file.response) {
file.url = file.response. # verifique seu respone e escolha seu próprio url no servidor #;
}
arquivo 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");
}

} `

tente isso.

Também encontrei este problema. Após uma série de testes, senti que o problema foi encontrado. Explique:

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

A situação de teste inclui: Se você executar this.setState({fileList}) diretamente em handleChange, ele será executado normalmente.

Minha escrita anterior é semelhante a esta: após a filtragem, leva à primeira execução, filtrando a fileList em um array vazio. Portanto, sempre há apenas um estado de upload.
Acho que o problema é que, após o upload, se você definir manualmente o fileList como um array vazio, isso afetará a execução contínua do evento onChange. Depois de modificar ligeiramente as condições do filtro, o problema encontrado está realmente resolvido.

Existe alguma relação vinculativa entre essas duas propriedades em manutenção oficial? @Imxiongying

Além disso, no caso oficial, existe um caso semelhante com a filtragem (lista de upload de controle total). Gostaria de saber se há um problema com a minha rede. Neste caso também tem essa situação.

Também encontrei este problema. Após uma série de testes, senti que o problema foi encontrado. Explique:

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

A situação de teste inclui: Se você executar this.setState({fileList}) diretamente em handleChange, ele será executado normalmente.

Minha escrita anterior é semelhante a esta: após a filtragem, leva à primeira execução, filtrando a fileList em um array vazio. Portanto, sempre há apenas um estado de upload.
Acho que o problema é que, após o upload, se você definir manualmente o fileList como um array vazio, isso afetará a execução contínua do evento onChange. Depois de modificar ligeiramente as condições do filtro, o problema encontrado está realmente resolvido.

Existe alguma relação vinculativa entre essas duas propriedades em manutenção oficial? @Imxiongying

Além disso, no caso oficial, existe um caso semelhante com a filtragem (lista de upload de controle total). Gostaria de saber se há um problema com a minha rede. Neste caso também tem essa situação.

Em uma situação controlada, defina fileList como vazio no retorno de chamada onChange e a fileList dentro do componente Upload será atualizada para uma matriz vazia. Em seu onSuccess interno, onProgress e outra lógica, o arquivo que acionou o evento será encontrado na fileList. O retorno de chamada onChange é acionado

@luruozhou Uhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh , é assim

@yidianier handleProgress Onde essa função é chamada?

@yidianier handleProgress Onde essa função é chamada?

onProgress = {this.handleProgress}

Componentes controlados e componentes dependentes puramente externos são usados ​​em seus respectivos cenários. Componentes controlados são controlados logicamente em formiga, como clicar no espaço em branco para cancelar a caixa suspensa, etc. Problema, então o componente controlado carrega parte da lógica básica, não um problema no projeto do componente, então não reclame. . .

@todos

@ afc163

@yidianier handleProgress Onde essa função é chamada?

onProgress = {this.handleProgress}

obrigado

Este problema também ocorrerá em 3.13.1 @ afc163

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

@ xiaolong1024 # 14780

Este problema ainda ocorre. Ele está relacionado ao formulário 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});
};

Essa resposta resolveu meu problema！

Na versão 3.13.0, operar this.setState ({fileList}) em onChange após o empacotamento fará com que a solicitação de upload seja cancelada, o que é normal no ambiente de desenvolvimento e o motivo não pode ser determinado.

@tsuijie 3.13.5 foi corrigido.

Gostaria de perguntar ao autor, após enviar, não consigo obter a resposta em fileOBJ e o fileid retornado pelo backend. Como lidar com isso. Eu tenho a mesma situação, status === upload

`import React, {Component} de 'react';
import {Upload, Icon} from 'antd';
import {urlMapToFileList, fileListTourlMap} de '@ / utils / utils';
importar {upLoadFile} de '@ / services / api';

class UploadForm extends Component {
static defaultProps = {
hideCheckAll: false,
};

construtor (adereços) {
super (adereços);
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 = (dados) => {
const {arquivo} = dados;
const {fileList} = dados;
console.log ('handleChange', file.status);
if (file.status === 'done') {
depurador
const {resposta} = arquivo;
if (resposta && resposta.success) {
file.url = response.result.url;
fileList.pop ();
fileList.push (arquivo);
}
}
if (file.status === 'erro') {
fileList.pop ();
}

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

}

render () {
const {filesList} = this.state;
Retorna (

aceitar = "imagem / *"
headers = {{'x-Access-Token': localStorage.getItem ('token')}}
action = "/ api / admin / arquivo / upload"
listType = "cartão de imagem"
fileList = {filesList}
onChange = {this.handleChange}
{... this.porps}
>
{filesList.length> = 1? nulo:

exportar UploadForm padrão;
`
这种 控制 上传 数量, 但 上传 状态 一直 为 upload 是 啥 原因 原因
@ afc163

Embora seja um problema antigo há alguns anos, mas hoje eu também pisei nos poços e falei sobre os poços que encontrei. Se você usar o React.PureComponent para criar componentes, observe que ele passará o ciclo de vida shouldComponentUpdate por padrão. Faça uma comparação superficial e o endereço de referência de estado de sua lista de arquivos não mudou, então o componente de upload não será alterado.

let fileList = info.fileList;
/ * Aqui você precisa alterar a referência fileList * /
fileList = JSON.parse (JSON.stringify (fileList));
this.setState ({fileList: fileList});

3.16.1 O upload ainda tem problemas, a mudança só acontece uma vez, é recomendado atualizar

Precisa deste.setState ({fileList: fileList.slice ()}) desta forma

3.16.2 Ao usar o React Hook, fileList precisa ser copiado em profundidade em onChange of Upload, você pode usar lodash _.cloneDeep (fileList)

Integre mobx, use dois componentes de Upload em um Modal, e defina duas fileLists na loja correspondente. Um dos eventos onChange de Upload passa pelo processo normal de upload (os estados de upload e concluído são recebidos), Mas o outro foi decepcionante. Havia apenas envios o tempo todo. No final, só poderia ser resolvido desta forma.
修改前: this.fileList[0] = file; 修改后: this.fileList = []; this.fileList.push(file);
E, se this.fileList vier de uma classe herdada, a forma modificada não 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)
    })
}

Quero remover o item de exibição com falha quando ele falha. Por que o estado não muda dessa forma?

O console.log está correto, o estado está vazio, mas as ferramentas do desenvolvedor ainda estão disponíveis e as imagens de upload com falha também são exibidas

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

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

Como adicionar campos de identidade e tokens a URLs restritos? Como usar ações para transferi-los? A ação só dá endereços, você não pode adicionar dados?

Pode ser colocado no cabeçalho

está resolvido meu problema com este truque

eu tinha um sistema de criação de entrada dinâmica, então com novos adereços dinâmicos você pode contar sobre incomming adereços

Foi corrigido para mim quando comecei a usar React.Component vez de React.PureComponent .

Quando eu uso modal.info e control filelist, onChange é chamado apenas uma vez. Mas quando eu removo o Modal, ele funciona

posso

1: Use React.Component
2: Preste atenção para verificar se fileList está definido em getDerivedStateFromProps e se está definido corretamente.
3: fileList: this.state.fileList
4: onChange: ({file, fileList}) => {
this.setState ({fileList});
}

3.19.7 ainda tem esse problema

Publico um caso de sucesso para sua referência. Já tive esse problema antes, no entanto. Calcule também aqui anote, para facilitar a si mesmo esqueceu a pesquisa conveniente mais tarde

env:

• antd: 4.0.0-rc.1
• layout profissional: 5.0.0
• reagir: 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;

Que pena, o estado de upload deve ser definido como fileList, caso contrário, ele será executado apenas uma vez e, após um longo período de lançamento, ficará sem palavras.

Publico um caso de sucesso para sua referência. Já tive esse problema antes, no entanto. Calcule também aqui anote, para facilitar a si mesmo esqueceu a pesquisa conveniente mais tarde

env:

• antd: 4.0.0-rc.1
• layout profissional: 5.0.0
• reagir: 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;

Eu tenho o mesmo problema ao usar o componente Func. Info.status sempre tem status de upload e chamadas onChange apenas uma vez

@tsuijie 3.13.5 foi corrigido.

3.13.5 Eu também tenho o mesmo problema. A operação this.setState ({fileList}) em onChange fará com que a solicitação de upload seja cancelada

Se você não usar sua interface de ação, após o upload, haverá um status de upload, você precisa definir manualmente o status de cada arquivo como concluído

Se você não usar sua interface de ação, após o upload, haverá um status de upload, você precisa definir manualmente o status de cada arquivo como concluído

Verifique se o novo objeto é usado quando o fileList grava de volta o estado, [... fileList]

Ok obrigado

---Original---
De: "Amumu" < [email protected]>
Data: Dom, 26 de julho de 2020 17:59
Para: "ant-design / ant-design" < [email protected]>;
Cc: "Comentário" < comentá[email protected]>; "SCLGIS" < [email protected]>;
Assunto: Re: [ant-design / ant-design] Upload file.status está sempre sendo enviado (# 2423)

Se você não usar sua interface de ação, após o upload, haverá um status de upload, você precisa definir manualmente o status de cada arquivo como concluído

Verifique se o novo objeto é usado quando o fileList grava de volta o estado, [... fileList]

-
Você está recebendo isso porque comentou.
Responda a este e-mail diretamente, visualize-o no GitHub ou cancele a inscrição.

Não funciona se eu usar ganchos com as opções "múltiplos" habilitadas.
Se eu selecionar 3 arquivos, obtenho 2 na lista. Se eu selecionar 5 arquivos, obtenho apenas 3, às vezes 4. Se eu remover o prop "fileList", ele funciona bem e posso ver todos os arquivos da lista, mas não posso controlá-los - preciso usar o prop "fileList".
Tenho um comportamento diferente se usar o componente de classe em vez do gancho useState.

Eu também encontrei esse problema no 4.5.1, e ele estava sempre no estado de upload.Eu tentei os métodos mencionados pelos grandes caras antes, mas eles eram inúteis. Por fim, olhei para o código-fonte e descobri que era porque o valor-chave do componente de upload era diferente a cada vez que eu estava renderizando, o que levou a uma nova renderização. O código-fonte cancelou a solicitação de upload anterior por padrão, resultando em constante É o estado de uploding, o valor da chave é fixo e pode ser carregado com sucesso.

@tsuijie 3.13.5 foi corrigido.

3.13.5 Eu também tenho o mesmo problema. A operação this.setState ({fileList}) em onChange fará com que a solicitação de upload seja cancelada