el-upload的使用方法
el-upload的使用方法基本使用方法基本使用方法el-upload的基本使用方法很简单,参考官网的例子即可,这里记录几个常用的属性<el-col :span="12"><el-form-item label="附件" prop="attachments"><el-uploadclass="upload"name="file":action="doUpload":h
·
el-upload的使用方法
基本使用方法
el-upload的基本使用方法很简单,参考官网的例子即可,这里记录几个常用的属性
<el-col :span="12">
<el-form-item label="附件" prop="attachments">
<el-upload
class="upload"
name="file"
:action="doUpload"
:headers="headers"
:before-remove="beforeRemove"
:limit="3"
:on-exceed="handleExceed"
:before-upload="handleBeforeUpload"
:on-success="uploadSuccess"
:multiple="true"
:file-list="fileList"
>
<el-button type="text" size="small" icon="el-icon-upload">点击上传</el-button>
</el-upload>
</el-form-item>
</el-col>
- class:可以自己修改一下样式
- name:这个name很重要,错了后台接收不到文件,官方是这样解释的
上传的文件字段名
,实际上就是后端对应的接口参数的名字,后端可能是这么定义的public AjaxResult uploadFile(MultipartFile file) throws Exception
- action:就是后端接收文件的接口地址
- headers:有些程序用token作为鉴权依据,通常把token放在header中,headers长这样子:
headers: { Authorization: this.$store.getters.token }
- beforeRemove:删除之前可以弹出个提示框,问问要不要删除,就像这样 :
return this.$confirm(
确定移除 ${file.name}?)
- on-exceed:官方这么解释
文件超出个数限制时的钩子
,一般应用这个钩子弹出一个提示信息,告诉用户文件个数超过限制了 - before-upload:官方这么解释
上传文件之前的钩子,参数为上传的文件,若返回 false 或者返回 Promise 且被 reject,则停止上传。
我们可以在上传之前判断一下用户选择的文件是不是符合要求,比如文件类型是否正确、文件大小是否超限等。例如:
handleBeforeUpload(file) {
const uploadLimit = 2
const uploadTypes = ['jpg', 'png', 'doc', 'docx', 'xlsx', 'zip', 'rar', 'pdf']
const filetype = file.name.replace(/.+\./, '')
const isRightSize = (file.size || 0) / 1024 / 1024 < uploadLimit
if (!isRightSize) {
this.$message.error('文件大小超过 ' + uploadLimit + 'MB')
return false
}
if (uploadTypes.indexOf(filetype.toLowerCase()) === -1) {
this.$message.warning({
message: '请上传后缀名为jpg、png、txt、pdf、doc、docx、xlsx、zip或rar的附件'
})
return false
}
return true
}
- multiple:是否支持选择多个文件
- file-list:在查看数据的时候,如果我们要回显已经上传的文件,就需要设置这个属性了
fileList = [{name:"附件4.png",
fileName:"/profile/upload/2020/07/21/7e6735cbc848c40a2f2242b56d09fe58.png"},
{name:"新建文本文档.txt",
fileName:"/profile/upload/2020/07/21/34c6389353856c9429405360eaec864d.txt"}]
更多推荐
所有评论(0)