element vue 上传模板_Vue Element UI upload 组件上传文件之后 file list 依旧是空数组

如果您使用的是 Vue Element UI 的 Upload 组件，上传文件之后 file list 依旧是空数组，可能是因为您没有正确绑定 fileList 属性。

请确保您在 Upload 组件中正确绑定了 fileList 属性，并且该属性是一个数组。例如：

<el-upload
  class="upload-demo"
  action="/upload"
  :file-list="fileList"
  multiple>
  <el-button slot="trigger">选取文件</el-button>
  <el-button type="primary" slot="tip">或者拖拽文件到此处</el-button>
</el-upload>

其中，fileList 是一个数组，您需要在 data 中定义它：

data() {
  return {
    fileList: []
  };
}

如果您已经正确绑定了 fileList 属性，但是问题仍然存在，请检查您的后端代码是否正确处理了文件上传请求，并且返回了正确的响应。

相关问题

element vue 上传模板_vue+element实现excel中的信息批量导入和导入模板的下载

你可以通过以下步骤实现在Vue和Element UI中实现Excel批量导入和导入模板的下载：

1. 在Vue项目中安装element-ui和xlsx插件：

npm install element-ui xlsx --save

2. 创建一个ExcelUpload.vue组件，该组件包含一个文件上传按钮和一个下载模板按钮：

<template>
  <div>
    <el-upload
      class="upload-demo"
      action=""
      :before-upload="beforeUpload"
      :on-success="handleSuccess"
      :on-error="handleError"
      :file-list="fileList"
      :auto-upload="false"
    >
      <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
      <el-button style="margin-left: 10px;" size="small" @click="uploadFile">
        上传文件
      </el-button>
    </el-upload>
    <el-button style="margin-left: 10px;" size="small" @click="downloadTemplate">
      下载模板
    </el-button>
  </div>
</template>

3. 在Vue组件中定义fileList和beforeUpload方法：

<script>
import { saveAs } from 'file-saver';
import XLSX from 'xlsx';

export default {
  data() {
    return {
      fileList: [],
    };
  },
  methods: {
    beforeUpload(file) {
      const isExcel = file.type === 'application/vnd.ms-excel';
      if (!isExcel) {
        this.$message.error('只能上传Excel文件');
      }
      return isExcel;
    },
    uploadFile() {
      const formData = new FormData();
      this.fileList.forEach((file) => {
        formData.append('file', file.raw);
      });
      // TODO: 发送请求上传文件
    },
    handleSuccess(response) {
      this.$message.success('上传成功');
      // TODO: 处理上传成功后的操作
    },
    handleError() {
      this.$message.error('上传失败');
    },
    downloadTemplate() {
      const data = [
        ['姓名', '年龄', '性别'],
        ['张三', '18', '男'],
        ['李四', '20', '女'],
        ['王五', '22', '男'],
      ];
      const ws = XLSX.utils.aoa_to_sheet(data);
      const wb = XLSX.utils.book_new();
      XLSX.utils.book_append_sheet(wb, ws, 'Sheet1');
      const wbout = XLSX.write(wb, { bookType: 'xlsx', type: 'array' });
      saveAs(
        new Blob([wbout], { type: 'application/octet-stream' }),
        '模板.xlsx',
      );
    },
  },
};
</script>

4. 完成后，你就可以使用该组件来上传和下载Excel文件了。

注意：在上传文件之前，你需要发送一个请求将文件发送到服务器上进行处理。

vue element ui upload 组件内图片清空

如果你想在 Element UI Upload 组件内清空图片，可以使用以下方法：

1. 通过 `ref` 获取 Upload 组件实例，并调用 `clearFiles` 方法：

<template>
  <div>
    <el-upload
      ref="upload"
      class="upload-demo"
      action="/upload"
      :file-list="fileList"
      :auto-upload="false"
      list-type="picture">
      <el-button slot="trigger">上传文件</el-button>
      <el-button type="primary" @click="clearFiles">清空文件</el-button>
    </el-upload>
  </div>
</template>

<script>
export default {
  data() {
    return {
      fileList: [
        // 初始文件列表
      ]
    }
  },
  methods: {
    clearFiles() {
      this.$refs.upload.clearFiles()
    }
  }
}
</script>

2. 通过给 Upload 组件绑定一个 `key` 属性，来强制刷新 Upload 组件实例：

<template>
  <div>
    <el-upload
      key="upload"
      class="upload-demo"
      action="/upload"
      :file-list="fileList"
      :auto-upload="false"
      list-type="picture">
      <el-button slot="trigger">上传文件</el-button>
      <el-button type="primary" @click="clearFiles">清空文件</el-button>
    </el-upload>
  </div>
</template>

<script>
export default {
  data() {
    return {
      fileList: [
        // 初始文件列表
      ]
    }
  },
  methods: {
    clearFiles() {
      this.fileList = []
    }
  }
}
</script>

以上两种方法都可以实现清空图片的效果，具体使用哪种方法可以根据你的实际情况来决定。