公众号小程序制作步骤_在vue项目中使用element

摘要: 在vue新项目中应用element-ui的Upload提交部件的实例 文中详细介绍了vue新项目中应用element-ui的Upload提交部件的实例,共享给大伙儿,实际以下:el-uploadv-else:action="importFileUrl":data="up...

在vue项目中使用element-ui的Upload上传组件的示例       本篇文章主要介绍了在vue项目中使用element-ui的Upload上传组件的示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

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

 el-upload
 v-else
 :action="importFileUrl"
 :data="upLoadData"
 name="importfile"
 :onError="uploadError"
 :ess="ess"
 :beforeUpload="beforeAvatarUpload"
 el-button size="small" type="primary" 确定 /el-button 

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

data () {
 importFileUrl: '/cpy/add',
 upLoadData: {
 cpyId: '123456', 
 occurTime: '2017-08'
methods: {
 // 上传成功后的回调
 ess (response, file, fileList) {
 console.log('上传文件', response)
 // 上传错误
 uploadError (response, file, 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,然后后面跟着一个方法名,调用方法,返回你想要的地址,代码示例:

//html 代码
 el-upload :action="UploadUrl()" :ess="ess" :file-list="fileList" 
 el-button size="small" type="primary" 点击上传 /el-button 
 div slot="tip" /div 
 /el-upload 

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

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




联系我们

全国服务热线:4000-399-000 公司邮箱:343111187@qq.com

  工作日 9:00-18:00

关注我们

官网公众号

官网公众号

Copyright?2020 广州凡科互联网科技股份有限公司 版权所有 粤ICP备10235580号 客服热线 18720358503

技术支持:模板小程序