最近项目在使用ant design vue 的时候,使用了a-upload 上传图片。 但是遇到了不少问题,在此总结一下。
问题1. 上传图片后,鼠标悬浮或出现代码错误提示 “405 Not Allowed”
处理方法: 查了一下,参考了这篇文章 https://blog.csdn.net/Y_G_G/article/details/108105884。结合本地的代码看了一下,将原来的change事件上传修改为了使用 customRequest 自定义事件。问题得以解决。
不过,处理完之后也确实遇见了文件状态一直处于uploading 的问题。这里我将上传方法单独抽取了出来,所以执行上传,在axios能正常返回存储路径后,则修改文件状态
//修改status options.onSuccess(res, options.file)
这样能暂时处理掉一直显示uploading状态的问题。
问题2:点击上传图片后无反应 。修改前代码:
//默认change方法 handleChange (info) { if(info.file.status == "done"){ this.fileList = info.fileList; } }
a-upload上使用了customRequest 自定义方法,同样也绑定了change方法,因为调用完customRequest方法,会继续调用change方法,所以打算执行完customRequest上传后,通过change方法对fileList进行赋值,回显刚上传的图片。
处理: 检查后发现,之前在change方法中对status进行了判断,在执行上传时(使用axios)文件的状态一直是uploading。在axios未返回结果之前,就调用了change方法,但是change方法中判断只有status为done时,才会进行fileList的赋值,实际的操作中回发现,这样即使是在最后status为done时,也不会再进入到handleChange这个方法。
这个时候就需要用到上面说的,对文件上传转态进行修改。在路径返回后,在change方法中不有需要再对status进行判断,直接fileList赋值就可以了。
handleChange(info){ this.fileList = info.fileList; }