vue+element-ui--upload
2018-12-03 16:14
393 查看
[code]// 上传成功后的回调 uploadSuccess (response, file, fileList) { console.log('上传文件', response) console.log(file); //是否需要参数 }, // 上传错误 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 },
下载上传的文件
[code] this.$http({ url: this.$http.adornUrl(''),访问后台接口地址 method: 'get', responseType: 'arraybuffer', //必须设置此类型 }).then(res =>{ const blob = new Blob( [res.data], {type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8' }) const downloadElement = document.createElement('a'); const href = window.URL.createObjectURL(blob); downloadElement.href = href; downloadElement.download = this.timetrans(new Date); document.body.appendChild(downloadElement); downloadElement.click(); document.body.removeChild(downloadElement) ; window.URL.revokeObjectURL(href); this.dataListLoading = false }).catch(error => { console.log(error); })
相关文章推荐
- vue2.0 使用element-ui里的upload组件实现图片预览效果
- 在vue项目中使用element-ui的Upload上传组件
- vue2.0 使用element-ui里的upload组件实现图片预览效果方法
- vue2.0 使用element-ui里的upload组件实现多图上传。采用FORMDATA的方式上传。
- vue elementui el-upload组件 input type=file坑重新选择同一文件时不再显示
- 完美解决Vue+element-ui 中upload组件使用多个时无法绑定对应的元素
- vue+elementui el-upload上传文件携带参数
- 在vue项目中使用element-ui的Upload上传组件的示例
- vue+elementui的table行内实现el-upload文件添加/多文件上传
- vue-cli3.0+element-ui上传组件el-upload的使用
- Vue上传文件:ElementUI中的upload实现
- vuedraggable+element ui实现页面控件拖拽排序效果
- vue.js+element-ui,页面中使用row-class-name属性达到表格中状态、颜色的区分
- vue.js+element-ui
- vue + elementUI++Vue常见的坑
- 表格中的数据删除。vue+element-ui
- SpringBoot + Thymeleaf + vue + element-ui 全栈开发入门——项目部署
- vue + elementUI 使用笔记1
- vue+elementUi做的图片上传组件
- 在vue中使用Element-UI