在vue项目中使用element-ui的Upload上传组件的示例

前端之家收集整理的这篇文章主要介绍了在vue项目中使用element-ui的Upload上传组件的示例前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

本文介绍了vue项目中使用element-ui的Upload上传组件的示例,分享给大家,具体如下:

其中importFileUrl是后台接口,upLoadData是上传文件时要上传的额外参数,uploadError是上传文件失败时的回掉函数,uploadSuccess是文件上传成功时的回掉函数,beforeAvatarUpload是在上传文件之前调用函数,我们可以在这里进行文件类型的判断。

上传成功后的回调 uploadSuccess (response,file,fileList) { console.log('上传文件',response) },// 上传错误 uploadError (response,fileList) { console.log('上传失败,请重试!') },// 上传前对文件的大小的判断 beforeAvatarUpload (file) { const extension = file.name.split('.')[1] === 'xls' const extension2 = file.name.split('.')[1] === 'xlsx' const extension3 = file.name.split('.')[1] === 'doc' const extension4 = file.name.split('.')[1] === 'docx' const isLt2M = file.size / 1024 / 1024 < 10 if (!extension && !extension2 && !extension3 && !extension4) { console.log('上传模板只能是 xls、xlsx、doc、docx 格式!') } if (!isLt2M) { console.log('上传模板大小不能超过 10MB!') } return extension || extension2 || extension3 || extension4 && isLt2M } }

最近在适用VUE作为前端框架做自己的项目,在做到需要上传文件到服务器时,同事告诉我upload之中的action也就是上传地址不能动态的去更改,然后去看了一下,需要做以下处理才能动态的使用:

action是一个必填参数,且其类型为string,我们把action写成:action,然后后面跟着一个方法名,调用方法,返回你想要的地址,代码示例:

代码 点击上传
代码在 methods中写入需要调用方法 methods:{ UploadUrl:function(){ return "返回需要上传的地址"; } }

这是我解决方法,希望能帮到需要的人

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

猜你在找的Vue相关文章