element-ui el-upload实现上传文件及简单的上传文件格式验证功能
在后台管理系统中总是会用到上传文件的功能，
想实现的样式如下：（实现上传文件后，在input输入框显示文件名 ）
结构代码如下：
<el-form-item label="使用说明" class="uploadMain" prop="instruction">
<el-input
class="uploadInput"
v-model="productVO.instruction"
style="width: 75%"
placeholder="请上传pdf格式的使用说明文件"
:disabled="true"
>
<el-upload
slot="append"
class="uploadbox"
ref="upload"
name="file"
accept=".pdf" //接受上传文件的格式，此处会默认打开上传时筛选.pdf格式
:show-file-list="false"
:multiple="false" //如果想要一次选择多个文件 mulitiple为true
action="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-input
class="uploadInput"
v-model="productVO.entity"
style="width: 75%"
placeholder="请上传完整的tif/tiff/shp格式的数据文件"
:disabled="true"
>
<el-upload
slot="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=fileList
console.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 el-upload上传文件内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
