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