当前位置:首页 > 编程教程 > vue技术文章 > element UI upload组件上传附件格式限制方法

分享element UI upload组件上传附件格式限制方法

  • 发布时间:
  • 作者:码农之家
  • 点击:154

这篇文章主要知识点是关于element、UI、upload、的内容,如果大家想对相关知识点有系统深入的学习,可以参阅以下电子书

Vue.js项目实战
Vue.js项目实战影印完整版
  • 类型:Vue大小:141 MB格式:PDF作者:纪尧姆·周
立即下载

element UI upload组件上传附件格式限制方法

如下所示:

<el-upload
 :action="uploadUrl"
 ref="upload"
 :multiple="false"
 :on-change="fileChange"
 :before-upload="beforeUpload"
 :on-success="handleAvatarSuccess"
 :on-preview="file_click"
 class="upload-demo"
 list-type="text"
 accept=".jpg,.jpeg,.png,.gif,.bmp,.pdf,.JPG,.JPEG,.PBG,.GIF,.BMP,.PDF"
 :file-list="uploadForm.personFileList"
 :auto-upload="false">
 <el-button size="small" type="primary">选择文件</el-button>
  <div slot="tip" class="el-upload__tip"><i class="el-icon-warning" ></i>单个文件不超过5MB</div>
 </el-upload>

accept=".jpg,.jpeg,.png,.gif,.bmp,.pdf,.JPG,.JPEG,.PBG,.GIF,.BMP,.PDF"
//accept支持上传文件格式

以上这篇element UI upload组件上传附件格式限制方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持码农之家。

以上就是本次给大家分享的关于java的全部知识点内容总结,大家还可以在下方相关文章里找到相关文章进一步学习,感谢大家的阅读和支持。

vue 相关电子书
学习笔记
网友NO.468784

解决vue2.0 element-ui中el-upload的before-upload方法返回false时submit()不生效问题

我要实现的功能是在上传文件之前校验是否表格中存在重复的数据,有的话,需要弹窗提示是否覆盖,确认之后继续上传,取消之后,就不再上传。 项目中用的element-ui是V1.4.3 el-upload class="upload-demo" drag ref="fileUpload" :action="urls.fileUpload" :on-success="handleUploadSuccess" :on-error="handleUploadError" :on-progress="progressUpload" :before-upload="beforeUpload" show-file-list multiple i class="el-icon-upload"/i div class="el-upload__text"点击上传,或者拖拽到这里/div /el-upload 代码中我是将before-upload方法返回false,然后点击确认之后,调_this.$refs.fileUpload.submit();但是在点击确定之后,文件还是没有上传,后面去看了element-ui源码,发现before-upload方法如果返回false,submit()方法是会被拦截的。 还有第二个问题,就是取消时_this.$refs.fileUpload.clearFiles();我调的clearFiles()方法,这个方法会把文件列表全部清空,我只……

网友NO.492949

Element-UI中Upload上传文件前端缓存处理示例

Element-UI对于文件上传组件的功能点着重于文件传递到后台处理,所以要求action为必填属性。 但是如果需要读取本地文件并在前端直接处理,文件就没有必要传递到后台,比如在本地打开一个JSON文件,利用JSON文件在前端进行动态展示等等。 下面就展示一下具体做法: 首先定义一个jsonContent, 我们的目标是将本地选取的文件转换为JSON赋值给jsonContent 然后我们的模板文件是利用el-dialog和el-upload两个组件组合:这里停止文件自动上传模式:auto-upload="false" el-button type="primary" @click="dialogVisible = true"Load from File/el-button el-dialog title="Load JSON document from file" :visible.sync="dialogVisible" el-upload :file-list="uploadFiles" action="alert" :auto-upload="false" multiple :on-change="loadJsonFromFile" el-button size="small" type="primary"Select a file/el-button div slot="tip"upload only jpg/png files, and less than 500kb/div /el-upload s……

网友NO.313079

element-ui upload组件多文件上传的示例代码

之前有一篇写的如何同时传递form表单及upload组件文件,如果有多个upload文件该如何传递呢 上代码 html el-form ref="newform" :model="newform" :rules="rules" el-form-item prop="expName" label="" el-input v-model="newform.expName" placeholder="" /el-input /el-form-item el-form-item prop="expSn" label="" el-input v-model="newform.expSn" placeholder="" /el-input /el-form-item el-form-item label='' prop="groupName" el-select v-model="newform.groupName" placeholder="" @change="newSelectGroup($event)" el-option v-for="item in groupOptions" :key="item.groupId" :label="item.groupName" :value="item.groupId" /el-option /el-select /el-form-item el-form-item label="" prop="subGroupName" el-select v-model="newform.subGroupName" placeholder="" @change="newSelectSubGroup($event)" el-option v-for="item in subGroupOptions" :key="item.subGroupId" :label="item.subGroupName" :value="item.subGroupId" /el-option /el-select /el-form-item el-form-item label="" prop="expvmDifficul……

网友NO.373481

在vue项目中使用element-ui的Upload上传组件的示例

本文介绍了vue项目中使用element-ui的Upload上传组件的示例,分享给大家,具体如下: el-upload v-else class='ensure ensureButt' :action="importFileUrl" :data="upLoadData" name="importfile" :onError="uploadError" :onSuccess="uploadSuccess" :beforeUpload="beforeAvatarUpload" el-button size="small" type="primary"确定/el-button 其中importFileUrl是后台接口,upLoadData是上传文件时要上传的额外参数,uploadError是上传文件失败时的回掉函数,uploadSuccess是文件上传成功时的回掉函数,beforeAvatarUpload是在上传文件之前调用的函数,我们可以在这里进行文件类型的判断。 data () { importFileUrl: 'http:dtc.com/cpy/add', upLoadData: { cpyId: '123456', occurTime: '2017-08' }},methods: { // 上传成功后的回调 uploadSuccess (response, file, fileList) { console.log('上传文件', response) }, // 上传错误 uploadError (response, file, fileList) { console.log('上传失败,请重试!') }, // 上传……

<
1
>

Copyright 2018-2020 www.xz577.com 码农之家

版权投诉 / 书籍推广 / 赞助:520161757@qq.com