Ant-design: Загрузить файл. Статус всегда загружается

В моих реальных измерениях нет проблем. Удобно ли давать полный код для облегчения воспроизведения?

Переадресация:
http://codepen.io/xiongying/pen/jAGRvx?editors=0011

Для управляемого режима вы всегда должны устанавливатьState fileList в onChange чтобы гарантировать, что все состояния синхронизируются с выгрузкой. Подобно формулировке здесь: 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} />

Рекомендуется изучить концепцию контролируемых компонентов: https://facebook.github.io/react/docs/forms.html#controlled -components

Обратите внимание, что вам нужно клонировать fileList чтобы функция Upload могла распознавать изменения в массиве.

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

e0a986ed71cd87e506fb8e4ee5e2e0130fc70ae1

Почему мне всегда не удается загрузить, когда я использую элемент управления выгрузкой, и всегда сообщаю об ошибке: POST http: // localhost : 8081 / api / nes / 2 / uploadMusic / r_ty 404 (не найдено)

Как добавить поля идентификации и токены в URL с ограниченным доступом? Как использовать действия для их передачи? Действие дает только адреса, разве нельзя добавить данные?

В React.PureComponent все еще есть проблема, потому что React.PureComponent сделал уровень оценок оптимизации. Список файлов содержит кешированные ссылки. Если это тот же объект, он не будет обновлен. Новый объект должен быть немедленно сгенерирован в React.PureComponent.
handleChange = ({fileList}) => {
// исправлена ​​ошибка
this.setState ({fileList: fileList.slice ()});
}

@ afc163

@yongningfu Спасибо за подсказку, он обновлен.

Специальное напоминание: при использовании React shouldComponentUpdate для поверхностного сравнения в контролируемом режиме, даже если состояние синхронизировано с Upload, оно не будет обновлено. Причина в том, что ссылка конгруэнтна ===, что предотвращает рендеринг

Загрузить несколько изображений, beforeUpload устанавливает предел параметра загружаемого изображения, onChange получает список изображений, которые были успешно загружены, после успешной загрузки нескольких изображений загрузка неправильного изображения удалит все изображения, которые были успешно загружены ранее, есть ли какое-либо решение ?

Когда вы перезвоните, вы должны сбросить статус, например this.setState ({fileList});

handleChange = (информация) => {
console.log (информация);

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

Итак, пока onChange меняет состояние, Upload всегда будет вызываться изнутри, верно?

Эта проблема решалась очень давно, и она оказалась setState. Компоненты не должны разрабатываться таким образом, зачем полагаться на ленивое внешнее состояние?

Мне нужен только код base64 и я не взаимодействую с фоном.Как решить проблему автоматической отправки запросов в фон?

Это скульптура из песка, чтобы поддерживать этот компонент?

Что мне делать, если загрузка не удалась и я хочу отобразить предыдущее изображение по умолчанию?

Не удалось загрузить. В функции обработки ошибок вызовите
this.setState ({
fileList: intial_list
})
Может отображать предыдущее изображение по умолчанию

Я думаю, что может быть проблема со временем выполнения обратного вызова, когда загрузка компонента завершена. Попробуйте рассмотреть такую ​​ситуацию:

Псевдокод отношения компонентов:

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

Родительский компонент Controller получает уведомление об обновлении состояния через onUpload .

Но поскольку обновление состояния React является асинхронным, если загрузка изображения выполняется достаточно быстро, порядок выполнения будет выглядеть как
constroller.onUpload(会调用 controller.setState) -> upload.onSuccess -> upload.componentWillReceiveProps
В случае выполнения upload.onSuccess соответствующий загруженный файл в состоянии загрузки отсутствует. Поскольку обновление загрузки state.fileList зависит от componentWillReceiveProps .

Поэтому я считаю, что текущий управляемый режим этого компонента ненадежен.

Возможные решения:

1. В контролируемом режиме логика фактической обработки onSuccess и другие события помещают componentDidUpdate проводимое
2. Избегайте state.fileList Полностью зависит от props.fileList , поддерживает относительно независимый от fileList (а не состояние экземпляра компонента instance.state) экземпляр экземпляра компонента, простота обработки загрузки событий

пусть {файл, список файлов} = информация;
if (file.size / 1024/1024> 10) {
возвращение
}
console.log (файл.status)
if (file.status! = "готово") {
fileList = []
}
this.setState ({
fileList,
}, console.log (
this.state.fileList,
this.props.form.getFieldValue ('загрузить')
))
当 我 添加

пусть {файл, список файлов} = информация;
if (file.size / 1024/1024> 10) {
возвращение
}
console.log (файл.status)
if (file.status! = "готово") {
fileList = []
}
this.setState ({
fileList,
}, console.log (
this.state.fileList,
this.props.form.getFieldValue ('загрузить')
))
Когда я добавляю
if (file.status! = "готово") {
fileList = []
}
Наблюдайте за изменением один раз, просто удалите его. Почему?

Эта проблема не решена, да

Вызов setState во время жизненного цикла componentWillReceiveProps для отображения изображения не изменится

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

Когда компонент загрузки

@PTGuan Конечно, этот компонент загружается один за другим, и внутренний API также получает один файл за другим. Вам нужно вызывать выгрузку рекурсивно в обратном вызове после успешной загрузки для загрузки партиями. Надеюсь закончить твой вопрос.

Эта проблема не решена +1

antd 3.8+ по-прежнему имеет только status = 'loading', и нет состояния "Готово", как это решить?

Есть ли официальное решение для постоянной загрузки, но onSuccess может дождаться правильного ответа http200

Проблема была решена, this.setState ({fileList: [... fileList]}); Это предложение очень важно, пожалуйста, сосредоточьтесь на нем, если у вас есть проблемы

@EnixCoda , похоже, я столкнулся с описанной вами проблемой, и иногда я загружаю ее, и она всегда показывает "Загрузка".

@withzhaoyu На самом деле, большинство людей здесь сталкиваются с этой проблемой. Этот компонент не очень надежен для хранения прогресса загрузки через состояние React.

Как это решить! ! ! ! ! ! ! ! ! ! Был загружен

Встреча +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});
};

Что делать, если вы читаете base64 файла без взаимодействия с фоном

@ 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 , вы можете сами инкапсулировать другой компонент на основе этого компонента, чего еще нельзя удовлетворить с точки зрения функции

Слабый вопрос: не является ли это намеренным решением не предоставлять URL-адреса для недавно загруженных файлов?

Весело. Теперь статус в списке файлов по-прежнему загружается, даже если он становится контролируемым, я все равно устанавливаю статус на отправку.Проблема вообще не решена

Могу ли я спросить, возвращается ли флаг сбоя загрузки файла из бэкэнда -> file.response.status, компонент не перехватывается в это время, и когда я дойду до готового, отображается список файлов. Я хочу очистить список файлов с помощью флага, возвращаемого бэкэнд Как это сделать?

// Я наступил на яму, посмотрел исходный код и обнаружил, что проблемы, которые я использовал, следующие
// 1. имя переменной состояния
// Плохо

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

// товары

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

// 2. Параметром onFileChange является obj (включая два атрибута file и fileList) и this.setState ({fileList: [... fileList]}); должен вызываться в функции onFileChange

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

Есть английский случайно? У меня есть этот вопрос.

@developdeez в чем твоя проблема? какую версию Ant Design вы используете?
Раньше я использовал AntD 3.0 и работал над этим компонентом загрузки несколько месяцев. У меня все прошло хорошо. У меня не осталось никаких проблем. Вначале у меня были проблемы, но в конце концов я их все исправил. Так что я достаточно уверен, чтобы решить все общие проблемы.

@swordguard , Ant 3.9.3

Проблема в основном заключается в невозможности управлять списком файлов пользовательского интерфейса. Я загружаю и изображаю и пытался очистить его с помощью кнопки, и безуспешно.

Я также сделал здесь билет с образцом кода: https://github.com/ant-design/ant-design/issues/12722#event -1913716771

Удалось ли вам это сделать?

В случае ямы +1 я пробовал this.setState({ fileList: [...fileList] }) безрезультатно, PureComponent изменяется на Component, и статус останавливается только при загрузке, если только fileList не помещен в реквизиты

В случае ямы +1 я пробовал this.setState({ fileList: [...fileList] }) безрезультатно, PureComponent изменяется на Component, и статус останавливается только при загрузке, если только fileList не помещен в реквизиты

Вы можете попробовать, определить fileList как строку ~~ == ~~
// всегда 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}
/>

Эта проблема не решена. В файловом объекте нет атрибута originFileObj. Этот атрибут появляется только после загрузки? Но сейчас нет плана загружать в фоновый режим и напрямую получать содержимое base64.

this.setState({ fileList: [...fileList] }); Хотя это может решить проблему, отображаемую клиентом

Но по запросу после загрузки файла фон возвращает идентификатор файла. Когда я нажимаю кнопку «Отправить», мне нужно вернуть идентификатор, но статус всегда загружается, и я не могу получить ответ от фонового интерфейса.
@ afc163

Здесь та же проблема. В компоненте Upload вызывается обратный вызов в свойстве action , но аргумент UploadFile идет с пустым значением originFileObj ie undefined . Есть какие-нибудь подсказки, как читать содержимое файла с помощью компонента Upload ant без загрузки файла на бэкэнд?

Здесь та же проблема. В компоненте Upload вызывается обратный вызов в свойстве action , но аргумент UploadFile идет с пустым значением originFileObj ie undefined . Есть какие-нибудь подсказки, как читать содержимое файла с помощью компонента Upload ant без загрузки файла на бэкэнд?

На самом деле originFileObj вам не нужен, просто используйте файловый объект. Я думаю они удалили originFileObj

Я здесь, потому что хотел убедиться, что я не добавил в свой список файлы, которые не удалось загрузить. Другими словами, если мой file.status === "error" я не хочу отображать этот файл в пользовательском интерфейсе (конечно, не хочу отправлять этот ошибочный файл в запрос). Я пытался контролировать это, работая с моим собственным контролируемым компонентом и используя fileList . Я столкнулся с указанной проблемой, когда статус файла никогда не меняется с "загрузки".

Поэтому я вернулся к тому, чтобы не использовать контролируемый компонент из-за этой проблемы. Мне удалось получить желаемый запрос, убедившись, что normFile добавляет только файлы, которые не являются "ошибкой".

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

Опять же, я искренне надеюсь, что команда antd рассмотрит мое предложение (ранее написанное здесь ):

поддерживать состояния загрузки файлов в экземпляре Upload а не в состоянии экземпляра. bc состояние не всегда обновляется синхронно!

Позади меня данные, возвращаемые в фоновом режиме, будут отображаться отдельно на странице, Upload всегда будет хранить последнюю загрузку

@yoonwaiyan
`handleChange = (информация) => {
пусть fileList = info.fileList;
this.setState ({fileList: fileList.slice ()});
if (info.file.status === 'готово') {
message.success (info.file.name + "загрузка успешна");
fileList = fileList.slice (-1);
fileList = fileList.map ((файл) => {
if (file.response) {
file.url = file.response. # проверьте свой ответ и выберите свой собственный url с сервера #;
}
вернуть файл;
});

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

} `

попробуй это.

Я тоже столкнулся с этой проблемой. После волны тестирования я почувствовал, что проблема обнаружена. Объясните:

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

Тестовая ситуация включает в себя: Если вы непосредственно выполняете this.setState({fileList}) в handleChange, он выполняется нормально.

Мое предыдущее письмо похоже на это: после фильтрации оно приводит к первому выполнению, фильтруя fileList в пустой массив. Следовательно, всегда есть только одно состояние загрузки.
Я думаю, проблема в том, что после загрузки, если вы вручную установите для fileList пустой массив, это повлияет на продолжение выполнения события onChange. После небольшого изменения условий фильтра возникшая проблема действительно решена.

Существуют ли какие-либо обязательные отношения между этими двумя свойствами при официальном обслуживании? @Imxiongying

Кроме того, в официальном случае есть такой случай с фильтрацией (список загрузки полного управления), я не знаю, есть ли проблема с моей сетью, в этом случае тоже есть такая ситуация.

Я тоже столкнулся с этой проблемой. После волны тестирования я почувствовал, что проблема обнаружена. Объясните:

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

Тестовая ситуация включает в себя: Если вы непосредственно выполняете this.setState({fileList}) в handleChange, он выполняется нормально.

Мое предыдущее письмо похоже на это: после фильтрации оно приводит к первому выполнению, фильтруя fileList в пустой массив. Следовательно, всегда есть только одно состояние загрузки.
Я думаю, проблема в том, что после загрузки, если вы вручную установите для fileList пустой массив, это повлияет на продолжение выполнения события onChange. После небольшого изменения условий фильтра возникшая проблема действительно решена.

Существуют ли какие-либо обязательные отношения между этими двумя свойствами при официальном обслуживании? @Imxiongying

Кроме того, в официальном случае есть такой случай с фильтрацией (список загрузки полного управления), я не знаю, есть ли проблема с моей сетью, в этом случае тоже есть такая ситуация.

В управляемой ситуации установите для fileList значение empty в обратном вызове onChange, и fileList внутри компонента Upload будет обновлен до пустого массива. В его внутренней логике onSuccess, onProgress и другой логике файл, вызвавший событие, будет найден из fileList. Запуск обратного вызова onChange

@luruozhou Uhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh , я не знаю, если вы столкнулись с этой ситуацией

@yidianier handleProgress Где вызывается эта функция?

@yidianier handleProgress Где вызывается эта функция?

onProgress = {this.handleProgress}

Управляемые компоненты и чисто внешние зависимые компоненты используются в своих соответствующих сценариях. Управляемые компоненты логически контролируются в ant, например, щелчок по пустому полю для отмены раскрывающегося списка и т. Д. Если все они контролируются извне, вы почувствуете себя особенным Проблема, так что управляемый компонент несет в себе часть базовой логики, а не проблему с дизайном компонента, поэтому не жалуйтесь. . .

@все

@ afc163

@yidianier handleProgress Где вызывается эта функция?

onProgress = {this.handleProgress}

благодаря

Эта проблема также будет возникать в 3.13.1 @ afc163

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

@ xiaolong1024 # 14780

Эта проблема все еще возникает, это связано с rc-form?

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

Этот ответ решил мою проблему！

В версии 3.13.0 использование this.setState ({fileList}) в onChange после упаковки приведет к отмене запроса на загрузку, что является нормальным для среды разработки, и причину определить невозможно.

@tsuijie 3.13.5 был исправлен.

Я хотел бы спросить автора, после загрузки я не могу получить ответ под fileOBJ и идентификатор файла, возвращенный серверной частью. Как с этим бороться. У меня такая же ситуация, статус === загрузка

`импортировать React, {компонент} из 'реагировать';
импортировать {Загрузить, Значок} из 'antd';
импортировать {urlMapToFileList, fileListTourlMap} из '@ / utils / utils';
импортировать {upLoadFile} из '@ / services / api';

class UploadForm расширяет Component {
static defaultProps = {
hideCheckAll: ложь,
};

constructor (props) {
супер (реквизит);
console.log (urlMapToFileList (props.value));
this.state = {
filesList: urlMapToFileList (props.value) || urlMapToFileList (props.defaultValue) || [],
// значение: urlMapToFileList (props.value) || urlMapToFileList (props.defaultValue) || [],
};
}

onChange = value => {
const {onChange} = this.props;
if (onChange) {
const selfValue = fileListTourlMap (значение);
onChange (selfValue.length? selfValue: null);
}
};
handleChange = (данные) => {
const {файл} = данные;
const {fileList} = данные;
console.log ('handleChange', file.status);
if (file.status === 'done') {
отладчик
const {ответ} = файл;
if (response && response.success) {
file.url = response.result.url;
fileList.pop ();
fileList.push (файл);
}
}
if (file.status === 'error') {
fileList.pop ();
}

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

}

render () {
const {filesList} = this.state;
возвращение (

accept = "изображение / *"
заголовки = {{'x-Access-Token': localStorage.getItem ('token')}}
действие = "/ api / admin / file / upload"
listType = "картинка-карточка"
fileList = {filesList}
onChange = {this.handleChange}
{... this.porps}
>
{filesList.length> = 1? ноль:

экспорт по умолчанию UploadForm;
`
这种 控制 上传 数量 ， 但 上传 状态 一直 为 загрузка 是 啥 原因？
@ afc163

Хотя несколько лет назад это старая проблема, но сегодня я также наступил на ямы и рассказал о ямах, с которыми я столкнулся. Если вы используете React.PureComponent для создания компонентов, обратите внимание, что по умолчанию он пройдет жизненный цикл shouldComponentUpdate. Для поверхностного сравнения, адрес ссылки состояния вашего списка файлов не изменился, поэтому компонент загрузки не изменится.

пусть fileList = info.fileList;
/ * Здесь вам нужно изменить ссылку на fileList * /
fileList = JSON.parse (JSON.stringify (fileList));
this.setState ({fileList: fileList});

3.16.1 При загрузке все еще возникают проблемы, и изменение происходит только один раз, рекомендуется обновить

Нужен this.setState ({fileList: fileList.slice ()}) таким образом

3.16.2 При использовании React Hook, fileList необходимо глубоко скопировать в onChange of Upload, вы можете использовать lodash _.cloneDeep (fileList)

Интегрируйте mobx, используйте два компонента Upload в модальном окне и определите два списка файлов в соответствующем хранилище. Одно из событий onChange для Upload проходит через обычный процесс загрузки (принимаются состояния загрузки и завершения), А вот другой разочарован: всегда была только загрузка, и решить ее, в конце концов, можно только так.
修改前: this.fileList[0] = file; 修改后: this.fileList = []; this.fileList.push(file);
И, если this.fileList происходит от унаследованного класса, модифицированный способ работать не будет.

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

Я хочу удалить неисправный элемент отображения, когда он выходит из строя. Почему состояние не изменяется таким образом?

Журнал console.log правильный, состояние пустое, но инструменты разработчика все еще доступны, а также отображаются изображения с ошибкой загрузки

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

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

Как добавить поля идентификации и токены в URL с ограниченным доступом? Как использовать действия для их передачи? Действие дает только адреса, разве нельзя добавить данные?

Можно разместить в шапке

Решена моя проблема с этим трюком

У меня была система создания динамического ввода, поэтому с новыми динамическими реквизитами вы можете сообщить antd о входящих реквизитах

Это исправилось, когда я начал использовать React.Component вместо React.PureComponent .

Когда я использую modal.info и список файлов управления, onChange вызывается только один раз. Но когда я удаляю Modal, он работает

мочь

1: Используйте React.Component
2: Обратите внимание на то, чтобы проверить, установлен ли fileList в getDerivedStateFromProps и правильно ли он установлен.
3: список файлов: this.state.fileList
4: onChange: ({file, fileList}) => {
this.setState ({fileList});
}

3.19.7 все еще имеет эту проблему

Отправляю для справки успешный кейс. Однако у меня была эта проблема раньше. Также рассчитайте здесь сделайте заметку, чтобы облегчить себе забыл удобный поиск позже

env:

• antd: 4.0.0-rc.1
• pro-layout: 5.0.0
• реагировать: 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;

Что за яма, состояние загрузки должно быть установлено на fileList, иначе он будет выполнен только один раз, долго ворочается, и он безмолвен.

Отправляю для справки успешный кейс. Однако у меня была эта проблема раньше. Также рассчитайте здесь сделайте заметку, чтобы облегчить себе забыл удобный поиск позже

env:

• antd: 4.0.0-rc.1
• pro-layout: 5.0.0
• реагировать: 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;

У меня такая же проблема с использованием компонента Func. Info.status всегда имеет статус загрузки, а onChange вызывает только один раз

@tsuijie 3.13.5 был исправлен.

3.13.5 У меня такая же проблема. Операция this.setState ({fileList}) в onChange приведет к отмене запроса на загрузку

Если вы не используете его интерфейс действий, после загрузки будет статус всегда загружается, вам необходимо вручную установить статус каждого файла как готовый.

Если вы не используете его интерфейс действий, после загрузки будет статус всегда загружается, вам необходимо вручную установить статус каждого файла как готовый.

Пожалуйста, проверьте, используется ли новый объект, когда fileList записывает состояние, [... fileList]

Хорошо, спасибо

--- Оригинал ---
От: "Амуму" < [email protected]>
Дата: вс, 26 июля 2020 г., 17:59
Кому: "ant-design / ant-design" < [email protected]>;
Копия: «Комментарий» < [email protected]>; «SCLGIS» < [email protected]>;
Тема: Re: [ant-design / ant-design] Загрузить файл. Статус всегда загружается (# 2423)

Если вы не используете его интерфейс действий, после загрузки будет статус всегда загружается, вам необходимо вручную установить статус каждого файла как готовый.

Пожалуйста, проверьте, используется ли новый объект, когда fileList записывает состояние, [... fileList]

-
Вы получили это, потому что оставили комментарий.
Ответьте на это письмо напрямую, просмотрите его на GitHub или откажитесь от подписки.

Это не сработает, если я использую хуки с включенными опциями "кратные".
Если я выберу 3 файла, я получу 2 в списке. Если я выберу 5 файлов, я получу только 3, иногда 4. Если я удалю свойство "fileList", оно будет работать нормально, и я могу видеть все файлы в списке, но я не могу их контролировать - мне нужно использовать свойство "fileList".
У меня другое поведение, если я использую компонент класса вместо хука useState.

Я также столкнулся с этой проблемой в 4.5.1, и он всегда был в состоянии загрузки.Я пробовал методы, упомянутые большими парнями раньше, но они были бесполезны. Наконец, я посмотрел исходный код и обнаружил, что значение ключа каждого компонента загрузки было другим, когда я его визуализировал, что привело к повторному рендерингу. Исходный код по умолчанию отменил предыдущий запрос на загрузку, что привело к постоянному Это состояние загрузки, значение ключа фиксировано, а затем его можно успешно загрузить.

@tsuijie 3.13.5 был исправлен.

3.13.5 У меня такая же проблема. Операция this.setState ({fileList}) в onChange приведет к отмене запроса на загрузку