vue element upload 控件用form-data上传方式导入xls文件

<!-- 导入---------------------------------------- --><el-uploadstyle="margin-right: 10px":show-file-list="false":before-upload="beforeFileUpload"
><el-buttontype="success"icon="el-icon-upload":loading="percent < 100">{{ 100 > percent ? percent + "%" : "导入" }}</el-button></el-upload><!-- ---------------------------------------- -->

data() {return {// 上传----------------------------------------actionUrl: "https://xxx.com/import",fmt: ["xls", "xlsx"],dur: 100,percent: 100,// ----------------------------------------
},
methods: {// 上传文件----------------------------------------------------------------showFakeLoading() {this.interval && clearInterval(this.interval);this.percent = 0;this.interval = setInterval(() => {this.percent++;this.percent >= 99 && clearInterval(this.interval);}, this.dur);},hideFakeLoading() {this.interval && clearInterval(this.interval);this.percent = 100;},//文件上传之前beforeFileUpload(file, id) {// 判断是不是特定的格式________________________var fn = file.name.toLowerCase();var isFile = this.fmt.includes(fn.split(".").pop());const maxSize = 50; //限制大小const isLt2M = file.size / 1024 / 1024 <= maxSize;isFile || this.$message.error("上传文件只能是" + this.fmt + "格式");isLt2M || this.$message.error("上传文件大小不能超过" + maxSize + "MB");var allowUpload = isFile && isLt2M;allowUpload && this.showFakeLoading(); //虚假加载if (allowUpload) {// 为了实现form-data方式上传文件----------------------------------------let formData = new FormData();formData.append("import", file);this.$axios.post(this.actionUrl, formData, {headers: {"Content-Type": "multipart/form-data"}}).then((d) => {this.$message.success(`文件“${file.name}”导入成功`);this.hideFakeLoading();//停止加载this.submitSearchForm();//刷新列表}).catch((d) => {this.$message.error("文件导入失败，请稍后再试！");console.error(d);});// ----------------------------------------}return allowUpload; //若返回 false则停止上传}
}

vue element upload 控件用form-data上传方式导入xls文件相关推荐

java多文件上传plupload控件实现多图片上传（二）
接上篇 java多文件上传plupload控件实现多图片上传(一) 续写PluploadUtil 和 Plupload PO类,以及后台的action. 至此,可实现多文件上传功能. 上传文件Acti ...
vue+element树形控件实现根据条件(例id)禁用选项
项目中遇到的需求,就是根据已选择的id,遍历树形控件,只允许用户选择变量ids里面的id下面的children数据,其他都要禁用,不能选择,下面是代码: <template><el- ...
java 批量上传图片插件_java多文件上传plupload控件实现多图片上传（一）
使用的是plupload-2.1.2 控件.网上资源挺多的,很好下载. plupload 官方地址 : http://www.plupload.com/ plupload 示例: http://www ...
java百度上传控件_百度Bos上传文件工具类-BosUtils（java）
功能要求 java项目中所有的图片均使用对象存储BOS 准备材料首先你要又百度bos的账号,找到自己的ak.sk.endpoint.bucketname(这些东西不懂得可以去看bos的文档) 功能代 ...
解决vue+element 时间控件时间差，区域时差8小时
后入前的小白,百思不得其解好久,各种百度. 这位小姐姐总结的三种都试了不行,需要的小伙伴可以一起试试~ https://blog.csdn.net/molihuakai_118/article/det ...
[导入]在asp.net中利用FileUplad控件从同一个页面上传多个文件
在页面上导入System.IO类,再使用HttpFileCollection类和Request对象捕获要传送的文件.这样就可以从一个页面上传任意多个文件. <%@ Page Language=& ...
＜asp: FileUpload/＞控件，js判断上传文件大小
<script type="text/javascript"> //检查上传文件大小和获取文件名 function fileChange(target) ...
Vue学习笔记：Element时间控件设置某一个日期禁止选择
Vue学习笔记:Element时间控件添加一段时间禁止选择需求:时间控件,当天之前禁止选择,某一个日期的之前时间禁止选择文档: 代码实现:在时间控件上添加 :picker-options=&quo ...
web 前端常用组件【06】Upload 控件
因为有万恶的IE存在,所以当Web项目初始化并进入开发阶段时. 如果是项目经理,需要知道客户将会用什么浏览器来访问系统. 明确知道限定浏览器的情况下,你才能从容的让手下的封装必要的前端组件. 本篇文章 ...

vue element upload 控件用form-data上传方式导入xls文件

vue element upload 控件用form-data上传方式导入xls文件相关推荐

最新文章

热门文章