序文
最近要素アップロード機能を使用しているときに、アップロードコンポーネントでファイルリスト同時に更新することはできず、常に空の問題が発生します。
クリックして問題を確認します: Vue Element UI アップロード コンポーネントがファイルをアップロードした後、ファイル リストは空の配列のままです
この同期の問題を解決するには、vue で v-model を使用します (アップロード、削除は同期的に更新できます)。
<template>
<el-upload ref='picUpload' v-bind="bindUploadOption" :class="{ hide: hideUpload }" class="upload_box"
:on-change="handleChange" :on-remove="handleRemove">
<slot><i class="el-icon-plus"></i></slot>
</el-upload>
</template>
<script>
export default {
name: "BasicUpload",
data() {
return {
defaultOption: {
"auto-upload": true,
action: '',
limit: 1,
'list-type': 'picture-card',
'show-file-list': true,
data: {
},
class: '',
},
hideUpload: false
}
},
computed: {
bindUploadOption() {
if (this.$attrs.hasOwnProperty('on-change')) {
delete this.$attrs['on-change']
}
if (this.$attrs.hasOwnProperty('on-remove')) {
delete this.$attrs['on-remove']
}
return {
...this.defaultOption,
...this.$attrs
}
}
},
watch: {
'bindUploadOption.fileList': {
handler(nval) {
if (nval.length >= this.bindUploadOption.limit) {
this.hideUpload = true
} else {
this.hideUpload = false
}
},
deep: true
},
},
model: {
prop: 'fileList',
event: 'fileList',
},
methods: {
getUploadRef() {
return this.$refs.picUpload
},
setOtherOption(options) {
this.defaultOption = {
...this.defaultOption,
...options
}
},
handleChange(file, fileList) {
this.$emit("fileList", fileList)
this.$emit("on-change", {
file, fileList })
},
clearFiles() {
this.$emit("fileList", [])
this.$refs.picUpload.clearFiles()
},
handleRemove(file, fileList) {
this.$emit("fileList", fileList)
this.$emit("on-remove", {
file, fileList })
},
}
}
</script>
<style lang="scss" >
.upload_box.hide .el-upload--picture-card {
display: none !important;
}
</style>
分析する
- アップロードした写真の数が制限を超えると、アップロード ボタンが非表示になります
- HideUpload 経由で通知します。
- v-model を介したファイルリストの双方向バインディング
- アップロード コンポーネントはファイルリストをアクティブに変更する必要があるため、on-change メソッドと on-remove メソッドはコンポーネント内で処理され、
使用する場合は @ 形式でトリガーする必要があります。
使用
<basic-upload
ref='upload'
:data="itemForm"
:action="`${BASE_URL}uploadImg`"
:limit="1"
v-model="fileList"
list-type="picture-card"
:show-file-list="true"
:headers="headers"
:on-success="handleAvatarSuccess"
@on-remove="handleremove">
</basic-upload>