Ant-design: 업로드 file.status가 항상 업로드 중입니다.

실제 테스트는 문제가 없는데 문제의 완전한 코드를 제공하여 쉽게 재현 할 수 있는가?

주소 변경 :
http://codepen.io/xiongying/pen/jAGRvx?editors=0011

제어 모드의 경우, 당신은 항상 setState를해야 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

Upload가 어레이의 변경 사항을 감지 할 수 있도록 fileList 를 복제해야합니다.

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

e0a986ed71cd87e506fb8e4ee5e2e0130fc70ae1

업로드 컨트롤을 사용할 때 항상 업로드에 실패하고 항상 오류를보고하는 이유 : POST http : // localhost : 8081 / api / nes / 2 / uploadMusic / r_ty 404 (Not Found)

제한된 URL에 ID 필드 및 토큰을 추가하는 방법과이를 전송하는 작업을 사용하는 방법은 무엇입니까? 작업은 주소 만 제공합니다. 데이터를 추가 할 수 없습니까?

React.PureComponent가 최적화 판단 레이어를 만들어 냈기 때문에 여전히 React.PureComponent에 문제가 있습니다. 파일 목록에는 참조가 캐시되어 있습니다. 동일한 객체이면 업데이트되지 않습니다 .React에서 즉시 새 객체를 생성해야합니다. PureComponent.
handleChange = ({fileList}) => {
// 버그 수정
this.setState ({fileList : fileList.slice ()});
}

뿡뿡

@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>

onUpload 통해 상태를 업데이트하도록 상위 구성 요소 Controller 에 알림이 전송됩니다.

그러나 React의 상태 업데이트는 비동기식이므로 이미지 업로드가 충분히 빠르면 실행 순서가
constroller.onUpload(会调用 controller.setState) -> upload.onSuccess -> upload.componentWillReceiveProps
상황에서 upload.onSuccess 실행시 업로드 상태에 해당하는 업로드 파일이 없습니다. 업로드의 갱신하기 때문에 state.fileList 에 따라 componentWillReceiveProps .

따라서이 구성 요소의 현재 제어 모드는 신뢰할 수 없다고 생각합니다.

가능한 해결책:

1. 제어 모드에서 onSuccess 실제 처리 논리 및 기타 이벤트는 componentDidUpdate 수행
2. 피 state.fileList 에 완전히 의존 props.fileList , 구성 요소 인스턴스 인스턴스 (구성 요소 인스턴스 instance.state의 상태가 아닌) 상대적으로 파일 목록의 독립 유지, 이벤트 처리의 용이성 업로드

let {file, fileList} = 정보;
if (file.size / 1024 / 1024> 10) {
반환
}
console.log (file.status)
if (file.status! = "완료") {
fileList = []
}
this.setState ({
fileList,
}, console.log (
this.state.fileList,
this.props.form.getFieldValue ( 'upload')
))
当 我 添加

let {file, fileList} = 정보;
if (file.size / 1024 / 1024> 10) {
반환
}
console.log (file.status)
if (file.status! = "완료") {
fileList = []
}
this.setState ({
fileList,
}, console.log (
this.state.fileList,
this.props.form.getFieldValue ( 'upload')
))
내가 추가 할 때
if (file.status! = "완료") {
fileList = []
}
onchange를 한 번 모니터링하고 제거하면됩니다. 그 이유는 무엇입니까?

이 문제는 아직 해결되지 않았습니다.

그림을 표시하기 위해 componentWillReceiveProps 수명주기 동안 setState를 호출하면 변경되지 않습니다.

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

@ afc163 업로드 구성 요소가 여러 파일을 업로드 할 때 하나의 파일 만 성공적으로 업로드 될 수 있으면 어떻게됩니까? 로그를 살펴보고 info.fileList의 상태가 업로드 중이고 백분율과 응답이 모두 정의되지 않았지만 http 요청은 200입니다. 도와주세요

@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를 읽고 백그라운드와 상호 작용할 필요가없는 한 어떻게해야합니까?

뿡 빵뀨

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

문제는 기본적으로 UI의 파일 목록을 제어 할 수 없다는 것입니다. 나는 업로드 및 이미지화하고 운이없는 버튼을 사용하여 삭제하려고했습니다.

샘플 코드로 여기에서도 티켓을 만들었습니다 : https://github.com/ant-design/ant-design/issues/12722#event -1913716771

당신은 이것을 할 수 있었습니까?

pit +1의 경우 this.setState({ fileList: [...fileList] }) 시도해 보았습니다. PureComponent가 Component로 바뀌고 차이가 없습니다. fileList가 props에 들어 가지 않는 한 상태는 업로드 만 멈 춥니 다. 많이 물어보세요.

pit +1의 경우 this.setState({ fileList: [...fileList] }) 시도해 보았습니다. PureComponent가 Component로 바뀌고 차이가 없습니다. fileList가 props에 들어 가지 않는 한 상태는 업로드 만 멈 춥니 다. 많이 물어보세요.

시도해 볼 수 있습니다. fileList를 문자열로 정의하십시오 ~~ == ~~
// 항상 setState
this.setState ({fileList : JSON.stringify ([info.file])});

뿡 빵뀨

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] }); 클라이언트가 표시하는 문제를 해결할 수 있지만

하지만 요청에 따라 파일이 업로드되면 백그라운드에서 파일 ID를 반환합니다. 제출을 클릭하면 ID를 반환해야하지만 상태는 항상 업로드 중이며 백그라운드 인터페이스에서 응답을받을 수 없습니다.
뿡뿡

여기에도 같은 문제가 있습니다. Upload 구성 요소에서 action 속성의 콜백이 호출되지만 UploadFile 인수에는 빈 originFileObj ie undefined 있습니다. 파일을 백엔드에 업로드하지 않고 Upload 개미 구성 요소를 사용하여 파일 콘텐츠를 읽는 방법에 대한 단서가 있습니까?

여기에도 같은 문제가 있습니다. Upload 구성 요소에서 action 속성의 콜백이 호출되지만 UploadFile 인수에는 빈 originFileObj ie undefined 있습니다. 파일을 백엔드에 업로드하지 않고 Upload 개미 구성 요소를 사용하여 파일 콘텐츠를 읽는 방법에 대한 단서가 있습니까?

실제로 originFileObj가 필요하지 않고 파일 객체를 사용하십시오. 나는 그들이 originFileObj를 제거했다고 생각합니다.

업로드에 성공하지 못한 파일을 목록에 추가하지 않았는지 확인하고 싶었 기 때문에 여기에 있습니다. 즉, 내 file.status === "error" 해당 파일을 UI에 표시하고 싶지 않습니다 (확실히 요청에 잘못된 파일을 제출하고 싶지 않음). 내 자신의 제어 구성 요소로 작업하고 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 에는 항상 최신 업로드가 저장됩니다.

헉헉
`handleChange = (정보) => {
let 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. # respone을 확인하고 서버에서 자신의 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});
}

테스트 상황은 다음과 같습니다. handleChange에서 직접 this.setState({fileList}) 를 수행하면 정상적으로 실행됩니다.

필자의 이전 글은 이와 비슷하며, 필터링 후 첫 번째 실행으로 이어지고 fileList를 빈 배열로 필터링합니다. 따라서 항상 업로드 상태는 하나뿐입니다.
문제는 업로드 후 fileList를 수동으로 빈 배열로 설정하면 onChange 이벤트가 계속 실행되는 데 영향을 미친다는 것입니다. 필터 조건을 약간 수정하면 실제로 발생한 문제가 해결됩니다.

공식적인 유지 관리 하에이 두 속성 사이에 구속력있는 관계가 있습니까?

또한 공식적인 경우에는 필터링 (전체 제어 업로드 목록)과 같은 경우가 있습니다. 네트워크에 문제가 있는지 모르겠습니다.이 경우에도 이런 상황이 있습니다.

나는 또한이 문제에 직면했고, 테스트를 거친 후 문제가 발견되었다고 느꼈다.

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

테스트 상황은 다음과 같습니다. handleChange에서 직접 this.setState({fileList}) 를 수행하면 정상적으로 실행됩니다.

필자의 이전 글은 이와 비슷하며, 필터링 후 첫 번째 실행으로 이어지고 fileList를 빈 배열로 필터링합니다. 따라서 항상 업로드 상태는 하나뿐입니다.
문제는 업로드 후 fileList를 수동으로 빈 배열로 설정하면 onChange 이벤트가 계속 실행되는 데 영향을 미친다는 것입니다. 필터 조건을 약간 수정하면 실제로 발생한 문제가 해결됩니다.

공식적인 유지 관리하에이 두 속성간에 구속력이있는 관계가 있습니까? @imxiongying

또한 공식적인 경우에는 필터링 (전체 제어 업로드 목록)과 같은 경우가 있습니다. 네트워크에 문제가 있는지 모르겠습니다.이 경우에도 이런 상황이 있습니다.

제어 된 상황에서 onChange 콜백에서 fileList를 비워두면 Upload 구성 요소 내부의 fileList가 빈 배열로 업데이트됩니다. 내부 onSuccess, onProgress 및 기타 로직에서 이벤트를 트리거 한 파일은 onChange 콜백 트리거

@luruozhou 으 으으으 으으으 으으으 으으으 으으으 으으으 으으으 으으으 으으으 으으으!

@yidianier handleProgress이 함수는 어디에서 호출됩니까?

@yidianier handleProgress이 함수는 어디에서 호출됩니까?

onProgress = {this.handleProgress}

제어 된 구성 요소와 순전히 외부에 종속 된 구성 요소는 각각의 시나리오에서 사용됩니다. 제어 된 구성 요소는 공백을 클릭하여 드롭 다운 상자를 취소하는 등 ant에서 논리적으로 제어됩니다. 이러한 구성 요소가 모두 외부에서 제어되는 경우 특별한 문제가 발생합니다. 따라서 제어 된 구성 요소는 구성 요소 설계의 문제가 아닌 기본 논리의 일부를 포함하므로 불평하지 마십시오. . .

@모두

뿡뿡

@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 버전에서는 패키징 후 onChange에서 this.setState ({fileList})를 실행하면 업로드 요청이 취소되는 현상이 발생하며 이는 개발 환경에서는 정상이며 이유를 알 수 없습니다.

@tsuijie 3.13.5가 수정되었습니다.

작성자에게 물어보고 싶습니다. 업로드 후 fileOBJ 및 백엔드에서 반환 한 fileid에서 응답을받을 수 없습니다. 처리 방법. 나는 같은 상황에 처해있다. status === uploading

'react'에서`import React, {Component};
import {Upload, Icon} from 'antd';
'@ / utils / utils'에서 {urlMapToFileList, fileListTourlMap} 가져 오기;
'@ / services / api'에서 {upLoadFile} 가져 오기;

class UploadForm extends 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 = 값 => {
const {onChange} = this.props;
if (onChange) {
const selfValue = fileListTourlMap (value);
onChange (selfValue.length? selfValue : null);
}
};
handleChange = (데이터) => {
const {파일} = 데이터;
const {fileList} = 데이터;
console.log ( 'handleChange', file.status);
if (file.status === '완료') {
디버거
const {response} = 파일;
if (response && response.success) {
file.url = response.result.url;
fileList.pop ();
fileList.push (파일);
}
}
if (file.status === '오류') {
fileList.pop ();
}

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

}

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

accept = "이미지 / *"
headers = {{ 'x-Access-Token': localStorage.getItem ( 'token')}}
action = "/ api / admin / file / upload"
listType = "그림 카드"
fileList = {filesList}
onChange = {this.handleChange}
{... this.porps}
>
{filesList.length> = 1? 없는:

기본 UploadForm 내보내기;
`
这种 控制 上传 数量 ， 但 上传 状态 一直 为 uploading 是 啥 原因？
뿡뿡

몇 년 전에는 오래된 문제 였지만 오늘은 구덩이를 밟아 내가 만난 구덩이에 대해 이야기했습니다. React.PureComponent를 사용하여 구성 요소를 만드는 경우 기본적으로 shouldComponentUpdate 라이프 사이클을 통과한다는 점에 유의하십시오. 얕은 비교, 파일 목록의 상태 참조 주소가 변경되지 않았으므로 업로드 구성 요소가 변경되지 않습니다.

let 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을 사용할 때 업로드의 onChange에서 fileList를 딥 카피해야합니다. lodash _.cloneDeep (fileList)를 사용할 수 있습니다.

mobx를 통합하고 Modal에서 두 개의 Upload 구성 요소를 사용하고 해당 저장소에 두 개의 fileList를 정의합니다 .Upload의 onChange 이벤트 중 하나는 일반적인 업로드 프로세스 (업로드 및 완료 상태 모두 수신)를 거치지 만 다른 하나는 실망 스러웠습니다. 항상 업로드 만 있었고,이 방법으로 만 해결할 수있었습니다.
修改前: 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에 ID 필드 및 토큰을 추가하는 방법과이를 전송하는 작업을 사용하는 방법은 무엇입니까? 작업은 주소 만 제공합니다. 데이터를 추가 할 수 없습니까?

헤더에 배치 가능

이 트릭으로 내 문제가 해결되었습니다.

나는 동적 입력 생성 시스템을 가지고 있었으므로 새로운 동적 소품을 사용하면 들어오는 소품에 대해 antd에게 알릴 수 있습니다.

내가 사용하기 시작했을 때 그것은 나에 고정 React.Component 대신 React.PureComponent .

modal.info 및 control filelist를 사용할 때 onChange는 한 번만 호출됩니다. 하지만 Modal을 제거하면 작동합니다.

할 수있다

1 : React.Component 사용
2 : getDerivedStateFromProps에 fileList가 설정되어 있는지, 올바르게 설정되어 있는지 확인하십시오.
3 : fileList : this.state.fileList
4 : onChange : ({file, fileList}) => {
this.setState ({fileList});
}

3.19.7에는 여전히이 문제가 있습니다.

참조를 위해 성공적인 사례를 게시합니다. 그래도 전에이 문제가 발생했습니다. 나중에 편리한 검색을 잊어 버리기 쉽게 여기에서 계산하십시오.

env :

• 개미 : 4.0.0-rc.1
• 프로 레이아웃 : 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 :

• 개미 : 4.0.0-rc.1
• 프로 레이아웃 : 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 저도 같은 문제가 있는데 onChange에서 this.setState ({fileList}) 작업을 수행하면 업로드 요청이 취소됩니다.

액션 인터페이스를 사용하지 않는 경우 업로드 후 항상 업로드 상태가되므로 각 파일의 상태를 수동으로 완료로 설정해야합니다.

액션 인터페이스를 사용하지 않는 경우 업로드 후 항상 업로드 상태가되므로 각 파일의 상태를 수동으로 완료로 설정해야합니다.

fileList가 상태, [... fileList]를 다시 쓸 때 새 객체가 사용되는지 확인하십시오.

좋아 감사합니다

---실물---
From : "Amumu"< [email protected]>
날짜 : 2020 년 7 월 26 일 일요일 오후 17:59
받는 사람 : "ant-design / ant-design"< [email protected]>;
참조 : "Comment"< [email protected]>; "SCLGIS"< [email protected]>;
제목 : Re : [ant-design / ant-design] 업로드 file.status가 항상 업로드 중임 (# 2423)

액션 인터페이스를 사용하지 않는 경우 업로드 후 항상 업로드 상태가되므로 각 파일의 상태를 수동으로 완료로 설정해야합니다.

fileList가 상태, [... fileList]를 다시 쓸 때 새 객체가 사용되는지 확인하십시오.

—
댓글을 달았 기 때문에 수신 한 것입니다.
이 이메일에 직접 답장하거나 GitHub에서 확인하거나 구독을 취소하세요.

"multiples"옵션이 활성화 된 상태에서 후크를 사용하면 작동하지 않습니다.
3 개의 파일을 선택하면 목록에 2 개가 표시됩니다. 5 개의 파일을 선택하면 3 개, 가끔 4 개만 표시됩니다. "fileList"소품을 제거하면 정상적으로 작동하고 목록에있는 모든 파일을 볼 수 있지만 제어 할 수 없습니다. 사용해야합니다. "fileList"소품.
후크 useState 대신 클래스 구성 요소를 사용하면 다른 동작이 발생합니다.

4.5.1에서도이 문제가 발생했으며 항상 업로드 상태였습니다.이전의 거물들이 언급 한 방법을 시도했지만 쓸모가 없었습니다. 마지막으로 소스 코드를 살펴본 결과 렌더링 할 때마다 업로드 구성 요소의 키 값이 다르기 때문에 다시 시작되었습니다. -rendering. 소스 코드는 기본적으로 이전 업로드 요청을 취소하여 계속합니다. uploding 상태이며 키 값이 고정되어 성공적으로 업로드 될 수 있습니다.

@tsuijie 3.13.5가 수정되었습니다.

3.13.5 저도 같은 문제가 있는데 onChange에서 this.setState ({fileList}) 작업을 수행하면 업로드 요청이 취소됩니다.