Element-uiupload上传组件的具体使⽤
Element-ui upload上传组件的具体使⽤
Element，⼀套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌⾯端组件库。本次主要讲解其中upload上传组件的具体使⽤
upload标签为: el-upload 其中所需要功能均可以在其中添加实现
upload组件的属性
upload组件的⽅法
常⽤参数与⽅法说明
upload中常⽤的参数
action 上传的地址(常量) ⽬前可以测试上传的⽹址为:/posts/
:action 上传的地址(变量) 正常开发是调⽤后台API的地址⽐如：`${igin}/demo/api
s/test/api/upload` igin是域名(协议，主机号，端⼝)
:multiple true ⽀持多选⽂件 fal 不⽀持多选⽂件默认为不⽀持
:show-file-list true 显⽰已上传⽂件列表 fal 不显⽰默认为显⽰
accept 接受上传⽂件的类型，⽐如".zip" 可以选择ZIP压缩⽂件
:on-success="handleSuccess" ⽂件上传成功时调⽤⽅法
:on-error="handleError" ⽂件上传失败时调⽤⽅法
:before-upload="handleBeforeUpload" 上传⽂件之前时调⽤⽅法，参数为上传的⽂件，若返回 fal 或者返回Promi 且被 reject，则停⽌上传。注意此时不能调⽤clearFiles⽅法:disabled 是否禁⽤，true为禁⽤，fal为可⽤默认为可⽤
:limit 最⼤允许上传个数，如果超出则不会上传
:on-change="handleChange" ⽂件状态改变时调⽤⽅法，添加⽂件、上传成功和上传失败时都会被调⽤
:
auto-upload true 选取⽂件后⽴即上传 fal不⾃动上传需要⼿动上传需要调⽤submit⽅法进⾏上传
upload中常⽤⽅法
调⽤：
this.$learFiles 清空已上传的⽂件列表（该⽅法不⽀持在 before-upload 中调⽤）
this.$submit ⼿动上传⽂件列表
具体实例
这⾥准备了两个例⼦，⼀个是⾃动上传，另⼀个是⼿动上传。在项⽬中如果没有特殊需求的话⽤⾃动上传更⽅便⼀些。style标签设置的只是⼀个平时写⽐较习惯⽤的参数，可以忽略
⾃动上传
<template>
<div class="app-container">
<div class="the-container">
<el-upload
ref="uploadRef"
class="upload-demo"
action="/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 fal
}
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="fal"
>
<el-button type="primary">上传</el-button>
</el-upload>
<el-dialog
title="请输⼊密码"
:
visible.sync="dialogVisible"
width="30%"
:before-clo="handleClo"
>
<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="handleClo">取消</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 ⽐如`${igin}/demo/apis/test/api/upload`
actionUrl: '/posts/',
// 此参数为是否显⽰对话框
dialogVisible: fal,
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 fal
}
return true
},
// 上传⽂件数超过限制
handleExceed() {
this.$message({
message: '最⼤上传⽂件个数为1',
type: 'error'
})
},
// ⽂件状态改变时
handleChange(file) {
console.log(file.status)
if (file.status === 'ready') {
this.dialogVisible = true
}
},
// 关掉对话框时
handleClo() {
this.$refs.uploadRef.clearFiles()
this.dialogVisible = fal
},
// 提交密码
submitPass() {
console.log(this.ruleForm.pass)
if (this.ruleForm.pass === '111111') {
this.$refs.uploadRef.submit()
this.dialogVisible = fal
} el {
this.$message({
message: '请输⼊正确的密码',
type: 'error'
})
this.dialogVisible = fal
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>
