ファイルがアップロードされていません
ファイルが正常にアップロードされました
上記の効果を達成する方法:
1. まず第一に、el-uoload には多くの関数フックがあります。on-change は、ファイルのステータスが変更されたときにフックを示すためのフィードバック ファイルのアップロードに適しています。on-remove フックは、このファイルのステータスを削除するときです。リストから。
2. 一般的に使用される validate メソッドに加えて、el-form の検証ルールを変更することができます。ここでは、validateField を使用して一部のフォーム フィールドを検証します。
コード：
<template>
<el-form ref="exampleForm" :model="formModel" :rules="rules">
<el-form-item label="上传文件" prop="file">
<el-upload
class="upload-demo"
ref="upload"
:action="fileUploadUrl"
:auto-upload="false"
:on-change="fileChange"
:on-remove="fileRemove"
:file-list="fileList"
:limit="1"
accept=".doc,.docx,.xls,.xlsx,.ppt,.pptx,.pdf">
<el-button slot="trigger" type="primary" size="small">选择文件</el-button>
<span slot="tip" style="margin-left: 20px">只能上传doc/docx/xls/xlsx/ppt/pptx/pdf文件</span>
</el-upload>
</el-form-item>
</el-form>
</template>
<script>
export default {
data () {
return {
formModel: {
file: null
},
rules: {
file: [
{
required: true,
message: '请至少选择一个产品标签',
trigger: 'change'
}
]
},
}
},
methods: {
fileChange(uploadFile, fileList) {
this.formModel.file = uploadFile
if (fileList.length !== 0) {
this.$refs.exampleForm.validateField('file')
}
},
fileRemove(uploadFile, fileList) {
if (fileList.length === 0) {
this.formModel.file = null
this.$refs.exampleForm.validateField('file')
}
}
}
}
</script>上記のコードのアイデア:
ファイルをアップロードするときは、on-change フックを通じてアップロードされたファイルを保存し、validateField 関数を通じて el-upload にバインドされている prop フィールドを確認します。
ファイル リスト内のファイルが削除されるとき、on-remove フックによって fileList が空の場合は、対応する prop を空に設定し、validateField 関数を使用して、上記のように el-upload にバインドされた prop フィールドを確認します。