vue打开对话框清除选择的文件

您好，感谢您的提问。如果您使用的是element-ui框架的el-upload组件来实现文件选择和上传功能，那么在打开对话框时清除选择的文件可以通过以下两种方式实现：

1. 使用ref属性获取el-upload组件的实例，然后调用clearFiles()方法清除选择的文件，代码示例如下：

<template>
  <el-upload ref="upload" :action="uploadUrl" :auto-upload="false">
    <el-button slot="trigger">选择文件</el-button>
    <el-button slot="clear" @click="clearFiles">清空文件</el-button>
    <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
  </el-upload>
</template>

<script>
export default {
  data() {
    return {
      uploadUrl: '/upload'
    }
  },
  methods: {
    clearFiles() {
      this.$refs.upload.clearFiles();
    }
  }
}
</script>

2. 使用v-if指令在打开对话框时重新渲染el-upload组件，这样可以清空选择的文件，代码示例如下：

<template>
  <el-dialog :visible.sync="dialogVisible" @open="handleDialogOpen">
    <el-upload v-if="dialogVisible" :action="uploadUrl" :auto-upload="false">
      <el-button slot="trigger">选择文件</el-button>
      <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
    </el-upload>
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false,
      uploadUrl: '/upload'
    }
  },
  methods: {
    handleDialogOpen() {
      this.dialogVisible = true;
    }
  }
}
</script>

以上是两种实现方式，您可以根据实际需求选择适合自己的方式。希望能对您有所帮助。