Vue2 el-upload clearFiles

Vue2的el-upload是一个非常常用的上传组件，它可以实现文件的上传、预览、删除等功能。其中，clearFiles是el-upload中的一个方法，用于清空已上传的文件列表。

当使用clearFiles方法时，它会清空el-upload中已上传的文件列表，并触发on-change事件。在清空文件列表时，我们可以设置clearFiles方法的参数来指定需要清空哪些文件，如果不传参数，则默认清空所有已上传的文件。

需要注意的是，clearFiles方法只能清空已上传的文件列表，并不能删除服务器上的文件。如果需要删除服务器上的文件，需要在后端进行处理。

相关问题

Vue3 el-upload clearFiles

Vue3 el-upload 是一个基于 ElementUI 的文件上传组件，clearFiles 是该组件的一个方法，用于清空已上传的文件列表。

当你需要在上传文件后清空文件列表时，可以调用 clearFiles 方法。该方法将会清空已上传的文件列表，并重置组件状态，以便用户可以再次上传文件。

例如，在 Vue3 中使用 el-upload 组件并且需要在上传文件后清空文件列表，可以在上传成功后调用 clearFiles 方法，示例代码如下：

<template>
  <el-upload
    class="upload-demo"
    action="/upload"
    :on-success="handleUploadSuccess"
    :file-list="fileList">
    <el-button slot="trigger" type="primary">选取文件</el-button>
    <el-button slot="clear" type="danger" @click="clearFiles">清空文件</el-button>
  </el-upload>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const fileList = ref([]);

    const handleUploadSuccess = (response, file) => {
      fileList.value.push(file);
      // 上传成功后清空文件列表
      clearFiles();
    };

    const clearFiles = () => {
      fileList.value = [];
    };

    return {
      fileList,
      handleUploadSuccess,
      clearFiles,
    };
  },
};
</script>

vue2 el-upload 实现拖拽上传文件 点确定后才上传 这个功能 写一个组件

好的，以下是一个实现拖拽上传文件，点击确定后才上传的`<DragUpload>`组件。

<template>
  <div>
    <el-upload
      ref="upload"
      class="upload-demo"
      :action="action"
      :multiple="multiple"
      :before-upload="beforeUpload"
      :file-list="fileList"
    >
      <slot name="trigger">
        <div class="drag">
          <i class="el-icon-upload"></i>
          <div class="drag-text">将文件拖到此处，或<em>点击上传</em></div>
        </div>
      </slot>
    </el-upload>
    <div class="button-group">
      <el-button type="primary" @click="handleUpload" :disabled="fileList.length === 0">确定</el-button>
      <el-button @click="clearFiles">清空</el-button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'DragUpload',
  props: {
    action: {
      type: String,
      required: true
    },
    multiple: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      fileList: []
    }
  },
  methods: {
    beforeUpload(file) {
      return false;
    },
    handleUpload() {
      this.fileList.forEach(file => {
        this.$refs.upload.submit(file);
      });
    },
    clearFiles() {
      this.fileList = [];
    }
  }
}
</script>

<style>
.upload-demo {
  border: 1px dashed #ccc;
  border-radius: 2px;
  padding: 20px;
  text-align: center;
  cursor: pointer;
}
.drag {
  font-size: 20px;
  color: #999;
  margin-bottom: 10px;
}
.drag-text {
  margin-top: 10px;
}
.button-group {
  margin-top: 10px;
  text-align: right;
}
</style>

使用方法如下：

<template>
  <div>
    <drag-upload action="/upload" :multiple="true">
      <template v-slot:trigger>
        <el-button size="small" type="primary">上传文件</el-button>
      </template>
    </drag-upload>
  </div>
</template>

<script>
import DragUpload from './components/DragUpload';

export default {
  components: {
    DragUpload
  }
}
</script>

你可以根据自己的需求修改样式和属性。