element上传组建+axios实现文件上传

http-request：覆盖默认的上传行为，可以实现自定义上传
on-exceed：文件超出个数限制时的钩子

<el-upload class='image-uploader' :multiple='false' :auto-upload='true' list-type='text' :show-file-list='true':before-upload="beforeUpload" :drag='true' action='' :limit="1" :on-exceed="handleExceed":http-request="uploadFile"><i class="el-icon-upload"></i><div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div><div class="el-upload__tip" slot="tip">一次只能上传一个文件，仅限text格式，单文件不超过1MB</div>
</el-upload>

// 上传文件之前的钩子
beforeUpload(file) {//判断文件格式let hz = file.name.split(".")[1]if (hz != 'xlsx' && hz != 'xls') {return false;}
},
// 上传文件个数超过定义的数量
handleExceed(files, fileList) {this.$message.warning(`当前限制选择 1 个文件，请删除后继续上传`)
},
// 上传文件
uploadFile(item) {let fileObj = item.fileconst form = new FormData()// FormData 对象form.append('upload', fileObj)// 文件对象  'upload'是后台接收的参数名$.ajax({url: "http://",data: form,type: "POST",contentType: "multipart/form-data",processData: false, //告诉jquery不要对form进行处理contentType: false, //指定为false才能形成正确的Content-Typesuccess: function (res) {}})
}

如果是axios的话。

  uploadFile(item) {let fileObj = item.file;console.log(fileObj);const form = new FormData(); // FormData 对象form.append('sexcel', fileObj); // 文件对象  'upload'是后台接收的参数名this.$http.post('/passengerTraffic-admin/pc/importApi/importStation', form).then((res) => {if (res.data.code == 1) {this.$message.success(res.data.msg);this.upload = false;this.$refs.upload.clearFiles();this.getCList();} else {this.$message.error(res.data.msg);}});}

element上传组建+axios实现文件上传相关推荐

00截断上传绕过_【文件上传与解析】文件上传与解析漏洞总结v1.0
点击上方"公众号" 可以订阅哦! Hello,各位小伙伴晚上好~ 这里是依旧勤劳写公众号的小编~ 今天本公众号将推出一个新的模块,那就是漏洞知识点总结模块!!!(此处应有掌声~) ...
asp.net实现ftp上传代码(解决大文件上传问题)
asp.net实现ftp上传代码(解决大文件上传问题) 参考文章: (1)asp.net实现ftp上传代码(解决大文件上传问题) (2)https://www.cnblogs.com/LYunF/ar ...
文件上传linux服务器,Linux 文件上传Linux服务器
进入命令行在图形化桌面出现之前,与Unix系统进行交互的唯一方式就是借助由shell所提供的文本命令行界面(command line interface,CLI).CLI只能接受文本输入,也只能显示 ...
php怎么上传函数,PHP单文件上传原理及上传函数的封装操作示例
搜索热词 @H_404_0@本文实例讲述了PHP单文件上传原理及上传函数的封装操作.分享给大家供大家参考,具体如下: @H_404_0@表单: @H_404_0@0.PHP: 无标题文档请选择您要上 ...
SSM框架使用Layui文件上传插件实现多文件上传（多文件列表）
SSM框架使用Layui文件上传插件实现多文件上传(多文件列表) pom.xml文件的配置想要实现SSM框架实现多文件上传,必要的jar包必须要在pom.xml文件中引入.如下: <!--co ...
SharePoint 2010 ——自定义上传页面与多文件上传解决方案
SharePoint 2010 --自定义上传页面与多文件上传解决方案参考文章: (1)SharePoint 2010 --自定义上传页面与多文件上传解决方案 (2)https://www.cnbl ...
使用Apache文件上传控件实现文件上传
本文使用Apache提供的第三方文件上传控件进行文件上传 1.导入第三方commons-fileupload-1.3.2.jar和commons-io-2.5.jar包 2.页面form标签需添加en ...
【文件上传漏洞-01】文件上传漏洞概述、防御以及WebShell基础知识补充
目录 1 文件上传漏洞概述 2 文件上传漏洞防御.绕过.利用 2.1 黑白名单策略 3 WebShell基础知识补充 3.1 WebShell概述 3.2 大马与小马 1 文件上传漏洞概述概述:文件 ...
php 文件上传mime 类型,php文件上传类型（MIME）对照表
网上有很多php文件上传的类,文件上传处理是php的一个特色(至少手册上是将此作为php特点来展示的,个人认为php在数组方面的优异功能更有特色),学php的人都知道文件上传怎么做,但很多人在编程中却 ...

element上传组建+axios实现文件上传

element上传组建+axios实现文件上传相关推荐

最新文章

热门文章