<!-- 添加或修改服务器管理对话框 -->
<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-upload
ref="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-list
accept="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 = "添加知识科普";
},