element-ui el-upload实现上传文件以及简单的上传文件格式验证

在后台管理系统中总是会用到上传文件的功能，

想实现的样式如下：（实现上传文件后，在input输入框显示文件名）

结构代码如下：

 <el-form-item label="使用说明" class="uploadMain" prop="instruction"><el-inputclass="uploadInput"v-model="productVO.instruction"style="width: 75%"placeholder="请上传pdf格式的使用说明文件":disabled="true"><el-uploadslot="append"class="uploadbox"ref="upload"name="file"accept=".pdf"    //接受上传文件的格式，此处会默认打开上传时筛选.pdf格式:show-file-list="false":multiple="false"  //如果想要一次选择多个文件 mulitiple为trueaction="upload":on-change="onChange":auto-upload="false"  //自动上传，如果此处为true 选择完文件就直接上传了><!-- class="uploadbtn" --><el-button class="uploadbtn"></el-button></el-upload></el-input></el-form-item>

由于上述结构代码打开上传文件时会自动筛选accept的文件格式，但是在用户选择时仍可以自己选择全部文件，所以需要前端对上传文件进行初步的格式检验

前端部分上传文件初步检验js代码如下：

onChange(file) {// 校验格式if (['application/pdf'].indexOf(file.raw.type) == -1) {this.$message.error('请上传正确的pdf格式');return false;}this.productVO.instruction = file.name;this.productVO.instructionFile = file.raw; //上传文件时需要用到二进制，所以这里文件取值为file.raw},

上传至接口时js代码如下：

submit(){const formData = new FormData();formData.append('instruction', this.productVO.instruction);formData.append('instructionFile',this.productVO.instructionFile);//调用接口this.$post('/product/create',formData,{baseURL:'/',header:{isloading: true,'Content-Type': 'multipart/form-data'}).then()
}

此处涉及到文件的不同格式，列举一些常用的文件格式

".doc"	"application/msword"	".xls"	"application/vnd.ms-excel"
".docx"	"application/vnd.openxmlformats-officedocument.wordprocessingml.document"	".xlsx"	"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
".jpeg"	"image/jpeg"	".mp3"	"audio/x-mpeg"
".jpg"	"image/jpeg"	".mp4"	"video/mp4"
".png"	"image/png"	".pdf"	"application/pdf"
".ppt"	"application/vnd.ms-powerpoint"	".txt"	"text/plain"
".tar"	"application/x-tar"	".wps"	"application/vnd.ms-works"
".zip"	"application/x-zip-compressed"	".xml"	"text/plain"

附加：当上传文件为多个时，具体代码如下：

<el-form-item label="数据" class="uploadMain" prop="entity"><el-inputclass="uploadInput"v-model="productVO.entity"style="width: 75%"placeholder="请上传完整的tif/tiff/shp格式的数据文件":disabled="true"><el-uploadslot="append"class="uploadbox"ref="upload"name="file"accept=".tif,.tiff,.shp,.dbf,.prj,.sbn,.sbx,.shx":show-file-list="false"multiple:file-list="this.productVO.fileList"action="upload":on-change="onChange":auto-upload="false"><!-- class="uploadbtn" --><el-button class="uploadbtn"></el-button></el-upload></el-input><div style="color: #ffc230">此处是文本说明</div></el-form-item>

js代码如下：

onChange(file,fileList) {// 校验格式if (['image/tiff', ''].indexOf(file4.raw.type) == -1) {this.$message.error('请上传正确的tif/tiff/shp格式');return false;}else{this.productVO.fileList=fileListconsole.log(this.productVO.fileList)var listName=[]this.productVO.fileList.forEach(function(e){listName.push(e.name)})var listFileRaw=[]this.productVO.fileList.forEach(function(e){listFileRaw.push(e.raw)})this.productVO.entity = listName; //文本框显示所有的文件名this.productVO.entityFile = listFileRaw;}},

接口上传文件时formData传参改动如下：

 this.productVO.entityFile.forEach(element => {formData.append('entityFile', element)})

element-ui el-upload实现上传文件以及简单的上传文件格式验证相关推荐

element UI上传图片Upload组件使用图片转base64和fale文件处理 formdata数据格式的应用
element UI上传图片Upload组件使用 & 图片转base64和fale文件处理 & formdata数据格式的应用 1.element UI上传图片Upload组件使用效 ...
spring mvc(注解)上传文件的简单例子
spring mvc(注解)上传文件的简单例子,这有几个需要注意的地方 1.form的enctype="multipart/form-data" 这个是上传文件必须的 2.appl ...
vue问题三：element ui的upload组件上传图片成功和移除事件
element ui的upload组件上传图片成功和移除事件: 登录后获取到后台传的token存到中: sessionStorage.setItem("token",data.ob ...
上传文件按钮美化，上传文件前后状态控制
我们在做input文本上传的时候,html自带的上传按钮比较丑,如何对其进行美化呢?同理:input checkbox美化,input radio美化是一个道理的. input file上传按钮的美化 ...
上传文件到华为云云服务器,怎样上传文件到云服务器上
怎样上传文件到云服务器上内容精选换一换在本地主机和Windows弹性云服务器上分别安装QQ.exe等工具进行数据传输.使用远程桌面连接mstsc方式进行数据传输.该方式不支持断点续传,可能存在传 ...
java url 上传文件_Java使用HttpURLConnection上传文件(转)
从普通Web页面上传文件很简单,只需要在form标签叫上enctype="multipart/form-data"即可,剩余工作便都交给浏览器去完成数据收集并发送Http请求.但是 ...
php实现ftp上传,PHP_PHP实现ftp上传文件示例，FTP上传是PHP实现的一个常见且 - phpStudy...
PHP实现ftp上传文件示例 FTP上传是PHP实现的一个常见且非常重要的应用技巧,今天就来与大家分享一下PHP实现FTP上传文件的简单示例.希望对大家的PHP学习能带来一定的帮助. 主要代码如下: ...
爬虫之上传文件，request如何上传文件
爬虫之上传文件,request如何上传文件,当我们遇到需要上传文件的接口时,如何破解上传文件的密码呢? 如图,文件的参数名files[],传输多张图片,那如何用python实现呢? 1.方法1:使用r ...
web上传文件到ftp服务器,web 上传文件到ftp服务器上
web 上传文件到ftp服务器上内容精选换一换安装传输工具在本地主机和Windows云服务器上分别安装数据传输工具,将文件上传到云服务器.例如QQ.exe.在本地主机和Windows云服务器上分 ...

element-ui el-upload实现上传文件以及简单的上传文件格式验证

element-ui el-upload实现上传文件以及简单的上传文件格式验证相关推荐

最新文章

热门文章