最近在用vue开发一 后台管理系统,搭配着Element-UI—使用。其中—个部分用到了Element-UI中 的upload组件,在用的过程中碰到了不少的小坑,官网上7函数的用法只是在Attribute属性中做了 一些简介,我觉得还不够清晰,所以想写一些我在第一次使用upload组件时候遇到的坑和小问题给大 家分享一下。
坑1/返回值
onSuccess:‘uploadSuccess’ onErron’uploadError’
- | - | - |
---|---|---|
on-success | 文件上传成功时的钩子 |
function(response. file. fHeList) |
on-error | 文件上传失败时的也子 |
function(err. file. fileList) |
刚看到红色文字的我,很激动,心应当的就认为:魅on-success钩子的时候就文件上传 成功,触发on-error的时候就代表着文件上传失败。于是哗哗哗就写下了下面几行代码。
uploadSuccess(){
this.$message((
message:'恭喜你,上传成功 type: 'success'
});
},
uploadError(){
this <$message.error('上传失败,请重新上传');
}
嘿嘿嘿,很开心,以为这两个钩子已经完美的处理了我的问题了。在后来测试发现,无论上传成功上 传失败显示的都是:恭喜你,上传生成。这时候我就发现问题来了,上传成功与失败是根据后台小哥 给我返回的status来判断的(我我们这边定义好的接口),当他返回的status的值为1时就是上传成 功,status的值为0的时候就是文件已经存在,status的值为-1的时候就上传失败。由于后台没有给我 抛出错误,所以根本不会走到。n-error这个钩子。这时候我再仔细的看官方文档发现。n-success钩子 的函数中function(response, file, fileList)第一参数是response,也就是后台给我们返回的结果。于是 我把代码改成下面这样子,终于完美的解决了这个问题。
uploadsuccess(res)(
if(res.status==l)(
this.$message({
message:'恭喜你,上传成功 type: 1 success'
});
}else if(res.status==0){
this.$message((
message: res.msg, type: 'warning,
});
}else{
this. {
message. error('上传失败,请重新上传'); }
},
uploadError()(
this.$refs.upload.clearFiles(); this.$message.error('上传失败,请重新上传’); }
)
坑2/异歩问题
老大想让我在文件上传前,力0—个弹框,让用户修改文件名字的功能。于是我就想,在before-upload 这个钩子上处理就好了吧(注明:before-叩load这个钩子return fasle的话,文件会停止上传的)。于 是我在before-叩load钩子上直接加了个弹框,代码类似下面的。
:before-upload="beforeUpload" beforeUpload(){
this.$prompt('请输入文件名’,'提示( conf irmButtonText:'确定', cancelButtonText:,取消
inputvalue: this.value,
}).