el-upload上传文件file已经清空了，但是上传文件样式还是存在的，需要手动关闭

可以通过监听 `remove` 事件来实现清空上传文件并关闭上传文件样式。示例代码如下：

<el-upload
  ref="upload"
  action="/upload"
  v-model="fileList"
  @remove="handleRemove"
>
  <el-button>上传文件</el-button>
</el-upload>

methods: {
  handleRemove(file, fileList) {
    // 清空上传文件
    this.$refs.upload.clearFiles();
    // 关闭上传文件样式
    this.$refs.upload.uploadFiles = [];
  }
}

在 `remove` 事件中，可以先调用 `clearFiles` 方法清空上传文件，然后再将 `uploadFiles` 属性设置为空数组，即可关闭上传文件样式。

相关问题

关闭el-dialog弹窗，清空el-upload的file内容

关闭el-dialog弹窗可以使用`this.$refs.dialogName.close()`，其中`dialogName`为你的弹窗组件的`ref`属性名。

清空el-upload的file内容可以使用以下方法：

1. 通过给el-upload组件设置key属性，动态改变key的值来清空已上传的文件。例如，给el-upload组件绑定一个变量`uploadKey`作为key的值，当需要清空文件时，将`uploadKey`的值修改即可。

   <el-upload
     :action="uploadUrl"
     :key="uploadKey"
     ref="upload"
     :on-success="handleSuccess"
     :on-remove="handleRemove"
   >
     <el-button size="small" type="primary">点击上传</el-button>
   </el-upload>

   export default {
     data() {
       return {
         uploadUrl: 'your upload url',
         uploadKey: 0 // 初始值为0
       }
     },
     methods: {
       handleRemove() {
         this.uploadKey++ // 删除时修改uploadKey的值
       },
       handleSuccess(res) {
         // 上传成功后的处理
       }
     }
   }

2. 调用el-upload组件的clearFiles方法清空已上传的文件。

   this.$refs.upload.clearFiles()

vue中关闭弹窗，怎么手动删除el-upload已上传的文件，并清空上传文件列表

在Vue中关闭弹窗时手动删除el-upload已上传的文件，并清空上传文件列表，可以使用以下步骤：

1. 在关闭弹窗前记录已上传的文件信息，包括文件名、文件地址等。

2. 在关闭弹窗时，手动删除已上传的文件。可以通过发起AJAX请求将文件从服务器上删除，或者通过发送DELETE请求将文件从el-upload组件的文件列表中删除。

3. 清空上传文件列表。可以通过设置el-upload组件的文件列表为空数组来清空上传文件列表。

下面是一个示例代码，实现了在关闭弹窗时手动删除el-upload已上传的文件，并清空上传文件列表的功能：

<template>
  <el-dialog :visible.sync="dialogVisible" title="上传文件">
    <el-upload
      ref="upload"
      class="upload-demo"
      :action="uploadUrl"
      :on-success="handleUploadSuccess"
      :file-list="fileList"
      :auto-upload="false"
      :show-file-list="true"
    >
      <el-button slot="trigger" type="primary">选取文件</el-button>
      <el-button slot="append" type="primary" @click="handleUpload">上传</el-button>
    </el-upload>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="handleClose">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false,
      fileList: [],
      uploadedFiles: []
    };
  },
  methods: {
    handleUploadSuccess(response, file, fileList) {
      let uploadedFile = { name: file.name, url: response.url };
      this.uploadedFiles.push(uploadedFile);
    },
    handleUpload() {
      this.$refs.upload.submit();
    },
    handleClose() {
      // 手动删除已上传的文件
      this.uploadedFiles.forEach(file => {
        this.$http.delete(file.url).then(() => {
          console.log('文件删除成功');
        }).catch(() => {
          console.log('文件删除失败');
        });
      });
      // 清空上传文件列表
      this.fileList = [];
      this.uploadedFiles = [];
      this.dialogVisible = false;
    }
  }
};
</script>

在上述示例代码中，我们通过定义一个`uploadedFiles`数组来记录已上传的文件信息。在上传成功回调函数中，将上传的文件信息添加到`uploadedFiles`数组中。

在关闭弹窗时，我们遍历`uploadedFiles`数组，通过发送DELETE请求将文件从服务器上删除。然后，我们通过将`fileList`和`uploadedFiles`数组都清空来清空上传文件列表。最后，关闭弹窗。