New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Upload file.status is always being uploading #2423
Comments
我实测是没有问题的,方便给出有问题的完整代码以方便重现么? |
对于受控模式,你应该在 // 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 注意需要克隆 - this.setState({ fileList });
+ this.setState({ fileList: [...fileList] }); |
我使用Upload控件为什么总是上传失败,总是报错:POST http://localhost:8081/api/nes/2/uploadMusic/r_ty 404 (Not Found) |
对于有限制的url怎么去增加身份标识字段和token之类的用action怎么去传?action只给地址,不能加上data么? |
在 React.PureComponent 里面还是有问题的 因为React.PureComponent里面做了一层优化判断,filelist有缓存引用, 认为是同一个对象就不会更新, 在React.PureComponent立马 应该生成一个新的对象 |
@yongningfu 感谢提示,已更新。 |
特别提醒一下 : 在使用React shouldComponentUpdate 进行浅比较时,在受控模式当中,即使状态同步到 Upload 内,也不会更新的哦。原因是引用全等===,导致阻止render |
上传多张图片,beforeUpload设置上传图片参数限制,onChange获取上传成功的图片列表,上传成功几张图片后,上传一张错误的图片,会将前面上传成功的图片全部清除,请问有什么解决办法吗? |
当你回调的时候应该重新设置一下status 比如这样 this.setState( {fileList}); handleChange = (info) => {
|
这么说onChange只要是状态有变化,Upload内部就一直在调用,是这样吗 |
这个问题坑了半天,原来要setState一下。组件不应该设计成这样的,为什么依懒外部状态? |
我只想要那个base64码,不跟后台交互,怎么样解决自动向后台发请求的问题哦? |
在4.5.1上也遇到这个问题,一直是uploading的状态。试了前面大佬说的方法都没用,最后看了源码发现是因为我render时每次的upload组件的key值不一样,导致重新渲染了,源码默认就取消了前面的上传请求,导致一直是uploding的状态,key值固定然后就正常可以上传成功了
|
这样试试 #28827 (comment) |
谢谢 已经解决了! |
I understand nothing, all chineese. |
google translate is your friend ;) |
|
我没有使用 |
@WLyKan 升级到最新版本试试? |
这里的api设计实属奇怪,onChange需要setFileList,但onRemove却不需要 |
使用4.16.2 版本的upload 同样只能触发一次onChange |
My solution is to use the And then, the external data source the fastforward ref and Example code with external data source from the paste event import { useRef } from "react";
import { Upload } from "antd";
function MyComponent(props) {
const ref = useRef(null);
const onPaste = (event) => {
if (event.clipboardData.files.length > 0) {
// My solution, but any better idea?
refUpload.current.upload.uploader.uploadFiles(event.clipboardData.files);
}
};
useEffect(() => {
window.addEventListener("paste", onPaste);
return () => {
window.removeEventListener("paste", onPaste);
};
}, []);
return <Upload {...props} ref={ref} />
} Solution from this part of the source code |
Any news on that? |
@ar7casper Please check this #2423 (comment), and the last bit of the Chinese part is the key
And please update your controlled |
very thanks, |
如果我想 Upload 受控的情况下, 被 form 获取到的数据 和 Upload 内部维护的不一样该如何处理 |
官网demo是不是有点问题, 官网例子fileList.length >=8 的时候会隐藏上传按钮,但是现在上传组件需要在onchange方法中执行this.setState({ fileList } |
This fixed it for me thanks |
怎么关闭加载中的动画呀,好恼火哦,这个东西 |
这个问题困扰了一个下午,也看了之前留言中的处理方式,主要是围绕新文件数组对象让组件接收数据更新。
|
It seems everybody use react,I also got this issue with antdv (vue3),but I fixed with the following code,hope this can help others: export const UploadFileCom={
props:{
name:{type:String,default:"file"},
listType:{type:String,default:"picture-card"},
showUploadList:{type:Boolean,default:false},
data:{type:Object,default:{bucket:"slide"}}
},
emits:['change','beforeUpload','update:fileList'],
setup(props,{attrs,emit}){
var store = useConfig();
var action = `${store.apiHost}/mini/fileUpload/upload`;
const imageUrl = ref('');
const loading = ref(false);
const fileList = ref([]);
const header = {'Authorization':'bearer '+store.userToken};
return ()=>h(
<a-upload
v-model={[props.fileList,["fileList"]]}
name={props.name}
file-list={fileList.value}
headers={header}
list-type={props.listType}
{...attrs}
show-upload-list={props.showUploadList}
action={action}
data={props.data}
before-upload={(file,flist)=>{
emit('beforeUpload',file,flist)
}}
onChange={(info)=>{
//this is important ,just like setState in react,which mentioned above;
fileList.value = info.fileList;
emit('update:fileList',info.fileList);
if(info.file.status==="uploading"){
loading.value = true;
}
if(info.file.status === 'done'){
var {code,data,msg} = info.file.response;
if(code==1){
loading.value = false;
imageUrl.value = `${store.apiHost}${data.url}`;
}else{
loading.value = false;
message.error(msg);
}
}
if (info.file.status === 'error') {
loading.value = false;
message.error('upload error');
}
emit('change',info);
}}
>
{imageUrl.value!=''?
<img style="width:100%;" src={imageUrl.value} />
:(
loading.value?(
<LoadingOutlined></LoadingOutlined>
):(
<div>
<div style="display:block"><PlusOutlined></PlusOutlined></div>
<div style="display:block" class="ant-upload-text">上传</div>
</div>
)
)}
</a-upload>
);
}
}``` |
不自定义customRequest的话,组件默认就会发这个PUT请求上传文件。 customRequest: (options) => {
// 设置文件上传状态
options.onSuccess(null);
}, |
in below code when I am using fileList prop in with customRequest prop, info.file.status is stuck on "uploading", it never reaches to "done". But when I am using without fileList prop then it's working fine. If there is anybody who can help me with this then it would be a great help.
|
为什么我自定义customRequest, 且 |
Well, it's perplexing... Rather than code snippets, is there any working examples? Thanks! |
I've noticed that the state passed to |
If nothing works for you: |
原因是在react 18里面对于所有事件的状态更新进行了批处理,使用flushSync来解决
|
本地环境
你做了什么?
1.6.5版本 Upload控件onChange方法只会执行一次,且info.file.status一直为uploading,http请求正常,返回200。
降级为1.6.4之后正常使用,uploading之后info.file.status为done
你期待的结果是:
实际上的结果:
可重现的在线演示
无
The text was updated successfully, but these errors were encountered: