<!-- 添加或修改服务器管理对话框 --><el-dialog :title="title" v-model="open" width="800px" append-to-body><el-form ref="form" :model="form" :rules="rules" label-width="100px"><el-form-item label-position="right" label="上传图片" prop="text"><el-uploadref="uploadPictureModel" :file-list="form.pictureShow":action="baseURL+uploadPath":headers="uploadHeader"show-file-list:limit="1":on-exceed="handleExceed":on-success="setPicture":on-remove="handleRemove":before-upload="checkFileType"list-type="picture"><el-button size="small" type="primary" icon="el-icon-upload">点击上传</el-button><div class="el-upload__tip">只能上传不超过 2MB 的图片</div></el-upload></el-form-item><el-form-item label-position="right" label="上传视频" prop="text"><el-upload ref="uploadVideoModel" :file-list="form.videoShow":action="baseURL+uploadPath":headers="uploadHeader"show-file-listaccept="video/*":limit="1":before-upload="checkFileSize":on-exceed="handleExceed":on-success="setPictureVideoShow":on-remove="handleRemove"><el-button size="small" type="primary" icon="el-icon-upload">点击上传</el-button><div class="el-upload__tip">只能上传不超过 10MB 的视频</div></el-upload></el-form-item><el-form-item label="文案" prop="advertisingCopy" label-width="100"><editor v-model="form.advertisingCopy" show-word-limit :max-length="2000" :min-height="192"/></el-form-item></el-form><div class="dialog-footer"><el-button type="primary" :loading="isLoading" @click="submitForm">确 定</el-button><el-button @click="cancel">取 消</el-button></div></el-dialog>
以上是弹框内容,但是如果弹框的open 为false 那么就会导致无法获取ref属性。
所以如果想要清空el-uplload上传列表,需要将el-disable弹框显示出来后也就是open=true的时候,再去通过 this.$refs.uploadVideoModel.clearFiles();去清空上传列表。
代码如下:点击新增的时候清空
/** 新增按钮操作 */handleAdd() {this.reset();this.form={}this.open = true;this.$refs.uploadPictureModel.clearFiles();this.$refs.uploadVideoModel.clearFiles();this.title = "添加知识科普";},