elment-ui文件上传详解

文件上传总有各种问题，算是给自己一个总结吧
HTML

 <el-form-item prop="" class="form-item"><template slot="label">上传文件:</template><div class="form-info"><el-popover              ----弹出框设置placement="top"width="400"trigger="click"><el-uploadstyle="background-color: #E8F8F6"accept=".pdf, .doc, .docx, .xls, .xlsx, .jpg, .png"    ---限制的文件类型:action="uploadUrl"       ---动态地址multiple                 ---可同时选择多个:limit="5"               ---最多上传5个文件ref="uplode":on-preview="handlePreview"    ---点击上传文件:on-remove="handleRemove"      ---删除已上传文件:file-list="form.fileList"     ---本地列表:before-upload="beforeUpload"   ---文件上传前校验:on-change="fileChange"        ---文件状态改变:on-success="upSuccess"         ---上传成功后:on-exceed="handleExceed"        ---多选文件提示:on-error="upError"             ---上传失败:before-remove="beforeRemove"   ---删除文件前><el-button size="small" style="color:black;margin: 10px 0 0 10px;"  class="actBtn actBtn-0">上传文件</el-button><div slot="tip" class="el-upload__tip">只能上传pdf/doc/docx/xls/xlsx/jpg/png文件，且不超过2M</div></el-upload><div slot="reference"><svg-icon icon-class="up"  className="up" sgv_width="20px" sgv_height="20px" /><span style="font-size: 14px;">上传附件</span></div></el-popover></div>
</el-form-item>

个人理解，可能有些错误和不足，参考一下就行了
这个我是用了弹出框嵌套的文件上传

这是效果

js代码

  getfile(file) {      //调用的插件写的方法，预览用的console.log(file);FileSaver.saveAs(file.url,file.name);},// 删除已上传文件handleRemove(file, fileList) {console.log(file, fileList);this.form.fileList = fileListconsole.log(this.form.fileList)},// 点击上传的文件handlePreview(file) {console.log(file);// this.dialogImageUrl = file.url;// this.dialogVisible = true;this.getfile(file)},// this.$message(); 为自定义全局提示// 上传文件之前beforeUpload(file) {const fileSuffix = file.name.substring(file.name.lastIndexOf(".") + 1);const whiteList = ["pdf", "doc", "docx", "xls", "xlsx",'jpg','png'];if (whiteList.indexOf(fileSuffix) === -1) {this.$message("上传文件只能是 pdf、doc、docx、xls、xlsx、jpg、png格式", "error");return false;}const isLt2M = file.size / 1024 / 1024 < 2;if (!isLt2M) {this.$message("上传文件大小不能超过 2MB", "error");return false;}},fileChange(file){console.log(file);},//多选文件提示handleExceed(files, fileList){this.$message(`当前限制选择 5 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);},// 上传成功upSuccess(response, file, fileList) {console.log('成功');console.log(response, file, fileList);if(response.success){this.form.fileList.push({name: file.name, url: this.utils.getPicUrl()+response.items[0].filename, uid: file.uid})}else{this.form.fileList=this.form.fileList.splice(this.form.fileList.length-1,1)this.$message.error(response.message);}console.log(this.form.fileList);//   this.$message("上传成功");//   this.showTaxt = false},// 上传失败upError(e) {this.$message.error("上传失败", "error");},// //移除提示//  beforeRemove(file, fileList) {// return this.$confirm(`确定移除 ${ file.name }？`);//  },

elment-ui文件上传详解相关推荐

Multipart/form-data POST文件上传详解
Multipart/form-data POST文件上传详解理论简单的HTTP POST 大家通过HTTP向服务器发送POST请求提交数据,都是通过form表单提交的,代码如下: <form ...
php文件上传详解,PHP文件上传实例详解！！！
这篇文章主要介绍了PHP文件上传实例代码,需要的朋友可以参考下首先来看下上传部分的表单代码: 文件: 这里有几个要注意的地方,首先看这句 ,这里我们采用POST方法,个别浏览器还支持PUT方法,当 ...
Struts2之struts2文件上传详解
一.学习案例:通过在uploadfile.jsp页面填写完表单,提交后跳转到success.jsp页面,然后验证upload包下上传文件是否成功. 二.案例分析:struts2文件上传并不是表面上看的 ...
JAVA文件上传详解（附源码）
文章目录 JAVA文件上传详解(附源码) 1.准备工作 2.使用类介绍 FileItem类 ServletFileUpload类 3.代码编写 JAVA文件上传详解(附源码) 在web应用中,文件上传 ...
Retrofit2 multpart多文件上传详解
原文出处:http://www.chenkaihua.com/2016/04/02/retrofit2-upload-multipart-files.html Retrofit2是目前很流行的andr ...
JavaScript 文件上传详解
本文为 Qunar 技术沙龙投稿,版权归原作者所有,未经允许,请勿转载. 原文地址:http://mp.weixin.qq.com/s/KWFyJa06CNXrU8zhSzzQFQ 作者:梁志,201 ...
python爬虫：Multipart/form-data POST文件上传详解
简单的HTTP POST 大家通过HTTP向服务器发送POST请求提交数据,都是通过form表单提交的,代码如下: <form method="post"action=&qu ...
channelsftp的put_JSch - Java实现的SFTP（文件上传详解篇）
public void put(String src, String dst) 将本地文件名为src的文件上传到目标服务器,目标文件名为dst,若dst为目录,则目标文件名将与src文件名相同. 采用 ...
java web文件上传详解_java web图片上传和文件上传实例详解
java web图片上传和文件上传图片上传和文件上传本质上是一样的,图片本身也是文件.文件上传就是将图片上传到服务器,方式虽然有很多,但底层的实现都是文件的读写操作. 注意事项 1.form表单一定 ...

elment-ui文件上传详解

elment-ui文件上传详解相关推荐

最新文章

热门文章