el-upload组件上传图片成功后清除验证提示

在子组件每次上传成功后,调用父组件清除验证提示方法。

 父组件:

<el-form ref="dataForm">
      <el-form-item label="附件" prop="fileData">
        <fileUpload :fileData.sync="dataForm.fileData" arValidate='clearValidate' ></fileUpload>
      </el-form-item>
</el-form>

//验证提示
  fileData: [
          {
            required: true,
            message: "合同附件不能为空",
            trigger: "blur",
          },
        ],

//清除文件上传验证提示
    clearValidate(){
      this.$refs.dataForm.clearValidate('fileData')
    },

 

 子组件:

//调用父组件清除验证提示
  this.$emit('clearValidate')

  • 2
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
可以通过监听 `on-success` 事件,在事件回调函数中获取上传成功的文件列表,然后将这些文件列表保存到组件的 `file-list` 属性中,最后将 `show-file-list` 属性设置为 `true`,这样组件就会隐藏上传区域,只显示已上传的文件列表。 具体实现代码如下: ```html <template> <div> <el-upload ref="upload" class="upload-demo" :action="uploadUrl" :on-success="handleSuccess" :file-list="fileList" :show-file-list="showFileList" :auto-upload="false" :list-type="'picture'" multiple> <el-button slot="trigger" size="small" type="primary">选取文件</el-button> <el-button size="small" type="success" @click="submitUpload">上传到服务器</el-button> <el-button size="small" type="warning" @click="clearFiles">清空文件</el-button> </el-upload> <el-divider></el-divider> <div v-if="showFileList"> <el-image v-for="(file, index) in fileList" :key="index" :src="file.url" style="margin-right: 20px" :fit="fit" :preview-src-list="previewSrcList"></el-image> </div> </div> </template> <script> export default { data() { return { uploadUrl: '/upload', fileList: [], showFileList: false, previewSrcList: [], fit: 'cover' } }, methods: { handleSuccess(response, file, fileList) { fileList.forEach(item => { this.previewSrcList.push(item.url) }) this.fileList = fileList this.showFileList = true }, submitUpload() { this.$refs.upload.submit() }, clearFiles() { this.fileList = [] this.showFileList = false this.previewSrcList = [] } } } </script> ``` 在上面的代码中,我们监听了 `on-success` 事件,并在事件回调函数中获取上传成功的文件列表,然后将这些文件列表保存到 `fileList` 属性中,最后将 `showFileList` 属性设置为 `true`,这样组件就会隐藏上传区域,只显示已上传的文件列表。 同时,我们在显示已上传的文件列表时,通过 `v-for` 指令遍历 `fileList` 数组,使用 `el-image` 组件来显示每个文件的预览图,并通过 `preview-src-list` 属性设置预览图的列表。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值