重要的地方是参数的传递,我发现了一些问题,如:
我直接使用handleAvatarSuccess(p.id,res,file)的话
1.会出现在页面onload的时候未上传的时候直接调用成功的回调,由于我渲染了多个upload的组件就导致调用了很多次。
2.在回调方法中只能接到id了,原生的red和file都不见了。
解决方法:
1.使用官方给的:http-request覆盖原有的上传方法,自己需要创建formData对象然后将file append到这个formData对象中,别忘了创建header并表明contentType是application/formData,还有就是要在自己的方法中调用onsuccess和onerror的方法,因为自定义也会覆盖这几个方法。 传递参数的方式就是在组件中添加:data="{参数名:参数值}" 在自己写的方法中的入参.data.自己传递的参数名就能获取了。
2.简单点,也是我自己用的,图片展示的。
:on-success="(res,file)=>{handleAvatarSuccess(p.id,res,file)}"
//成功回调的方法中默认的是(res,file) 将这个参数指向指定的方法的参数,p.id是我传递的v-for中循环出来的对象的id值
//上传成功
handleAvatarSuccess:function(id,response,file){
console.log(id) //这里的入参位置要跟上面传递的位置相同
alert("上传完毕")
},