Element-ui upload上传组件的具体使用
Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库。本次主要讲解其中upload上传组件的具体使用
在Element的官网中也有一些例子来体验其功能，网址为：https://element.eleme.cn/#/zh-CN/component/upload
upload标签为: el-upload 其中所需要功能均可以在其中添加实现
upload组件的参数
upload组件的方法
常用参数与方法说明
upload中常用的参数
action 上传的地址(常量) 目前可以测试上传的网址为:
https://jsonplaceholder.typicode.com/posts/
:action 上传的地址(变量) 正常开发是调用后台API的地址比如：`${location.origin}/demo/apis/test/api/upload` location.origin是域名(协议，主机号，端口)
:multiple true 支持多选文件 false 不支持多选文件 默认为不支持
:show-file-list true 显示已上传文件列表 false 不显示 默认为显示
accept 接受上传文件的类型，比如".zip" 可以选择ZIP压缩文件
:on-success="handleSuccess" 文件上传成功时调用方法
:on-error="handleError" 文件上传失败时调用方法
:before-upload="handleBeforeUpload" 上传文件之前时调用方法，参数为上传的文件，若返回 false 或者返回
Promise 且被 reject，则停止上传。 注意此时不能调用clearFiles方法
:disabled 是否禁用，true为禁用，false为可用 默认为可用
:limit 最大允许上传个数，如果超出则不会上传
:on-change="handleChange" 文件状态改变时调用方法，添加文件、上传成功和上传失败时都会被调用
:auto-upload true 选取文件后立即上传 false不自动上传需要手动上传 需要调用submit方 法进行上传
upload中常用方法
调用：
this.$refs.xxx.clearFiles 清空已上传的文件列表（该方法不支持在 before-upload 中调用）this.$refs.xxx.submit 手动上传文件列表
具体实例
这里准备了两个例子，一个是自动上传，另一个是手动上传。在项目中如果没有特殊需求的话用自动上传更方便一些。style标签设置的只是一个平时写比较习惯用的参数，可以忽略
自动上传
<template>
<div class="app-container">
<div class="the-container">
<el-upload
ref="uploadRef"
class="upload-demo"
action="https://jsonplaceholder.typicode.com/posts/"
:multiple="true"
:show-file-list="true"
:file-list="fileList"
accept=".zip,.txt"
:on-success="handleSuccess"
:on-error="handleError"
:before-upload="handleBeforeUpload"
:limit="1"
:on-exceed="handleExceed"
:on-change="handleChange"
>
<el-button type="primary">上传</el-button>
</el-upload>
</div>
</div>
</template>
<script>
export default {
name: 'Index',
data() {
return {
fileList: []
}
},
methods: {
// 上传成功
handleSuccess() {
this.$refs.uploadRef.clearFiles()
this.$message({
message: '上传成功',
type: 'success'
})
},
// 上传失败
handleError() {
this.$message({
message: '上传失败',
type: 'error'
})
},
// 上传文件之前
handleBeforeUpload(file) {
const fileType = file.name.substring(file.name.lastIndexOf('.') + 1)
const fileTypeList = ['zip', 'txt']
if (!fileTypeList.includes(fileType)) {
this.$message({
message: '上传文件只能是zip,txt格式',
type: 'error'
})
this.fileList = []
return false
}
return true
},
// 上传文件数超过限制
handleExceed() {
this.$message({
message: '最大上传文件个数为1',
type: 'error'
})
},
// 文件状态改变时
handleChange(file) {
console.log(file.status)
}
}
}
</script>
<style lang="scss" scoped>
.app-container{
height: 100%;
background-color: #f1f1f1;
}
.the-container{
padding: 20px;
height: 100%;
background-color: #fff;
display: flex;
justify-content: center;
}
</style>
手动上传
手动上传主要是针对有明确要求需要一些权限才允许上传的情况。
<template>
<div class="app-container">
<div class="the-container">
<el-upload
ref="uploadRef"
class="upload-demo"
:action="actionUrl"
:multiple="true"
:show-file-list="true"
:file-list="fileList"
accept=".zip,.txt"
:on-success="handleSuccess"
:on-error="handleError"
:before-upload="handleBeforeUpload"
:limit="1"
:on-exceed="handleExceed"
:on-change="handleChange"
:auto-upload="false"
>
<el-button type="primary">上传</el-button>
</el-upload>
<el-dialog
title="请输入密码"
:visible.sync="dialogVisible"
width="30%"
:before-close="handleClose"
>
<el-form ref="ruleForm" :model="ruleForm" label-width="100px" class="demo-ruleForm">
<el-form-item label="密码" prop="pass">
<el-input v-model="ruleForm.pass" type="password" show-password />
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="handleClose">取 消</el-button>
<el-button type="primary" @click="submitPass">确 定</el-button>
</span>
</el-dialog>
</div>
</div>
</template>
<script>
export default {
name: 'Index',
data() {
return {
fileList: [],
// 实际开发中actionUrl为后台API 比如`${location.origin}/demo/apis/test/api/upload`
actionUrl: 'https://jsonplaceholder.typicode.com/posts/',
// 此参数为是否显示对话框
dialogVisible: false,
ruleForm: {
pass: ''
}
}
},
methods: {
// 上传成功
handleSuccess() {
this.$refs.uploadRef.clearFiles()
this.$message({
message: '上传成功',
type: 'success'
})
},
// 上传失败
handleError() {
this.$message({
message: '上传失败',
type: 'error'
})
},
// 上传文件之前
handleBeforeUpload(file) {
const fileType = file.name.substring(file.name.lastIndexOf('.') + 1)
const fileTypeList = ['zip', 'txt']
if (!fileTypeList.includes(fileType)) {
this.$message({
message: '上传文件只能是zip,txt格式',
type: 'error'
})
this.fileList = []
return false
}
return true
},
// 上传文件数超过限制
handleExceed() {
this.$message({
message: '最大上传文件个数为1',
type: 'error'
})
},
// 文件状态改变时
handleChange(file) {
console.log(file.status)
if (file.status === 'ready') {
this.dialogVisible = true
}
},
// 关掉对话框时
handleClose() {
this.$refs.uploadRef.clearFiles()
this.dialogVisible = false
},
// 提交密码
submitPass() {
console.log(this.ruleForm.pass)
if (this.ruleForm.pass === '111111') {
this.$refs.uploadRef.submit()
this.dialogVisible = false
} else {
this.$message({
message: '请输入正确的密码',
type: 'error'
})
this.dialogVisible = false
this.$refs.uploadRef.clearFiles()
}
}
}
}
</script>
<style scoped>
.app-container {
height: 100%;
background-color: #f1f1f1;
}
.the-container{
padding: 20px;
height: 100%;
background-color: #fff;
display: flex;
justify-content: center;
}
</style>
如果不理解el-dialog对话框组件可以参考官网的组件文档：https://element.eleme.cn/#/zh-CN/component/dialog