el-upload 设置了上传文件类型 选择时可以切换为全部类型

，可以通过设置 `accept` 属性来限制上传文件类型，如下所示：

<el-upload
  class="upload-demo"
  action="your-upload-url"
  :accept="['image/png', 'image/jpeg', 'application/pdf']"
>
  <el-button slot="trigger">上传文件</el-button>
  <div slot="tip" class="el-upload__tip">只能上传 png/jpeg/pdf 格式的文件</div>
</el-upload>

在 `accept` 属性中，可以设置允许上传的文件类型，多个类型用逗号分隔。如果需要上传所有类型的文件，可以将 `accept` 属性设为 `'*'`，如下所示：

<el-upload
  class="upload-demo"
  action="your-upload-url"
  accept="*"
>
  <el-button slot="trigger">上传文件</el-button>
  <div slot="tip" class="el-upload__tip">支持上传所有类型的文件</div>
</el-upload>

这样就可以将上传文件类型限制为指定的类型，同时也可以在需要时切换为上传所有类型的文件。

相关问题

el-upload 照片墙切换

为实现el-upload照片墙的切换效果，可以通过以下步骤实现：

1.在el-upload组件中设置show-file-list为false，这样就不会展示图片本身的file，只展示父组件传来的数据信息。

2.设置auto-upload为false，这样就不会自动上传文件，而是通过onchange来触发上传动作，顺便检测类型，确认上传大小等操作。

3.在父组件中维护一个数组，用于存储上传的图片信息。

4.在el-upload组件中设置一个v-for循环，循环展示父组件传来的图片信息。

5.在父组件中设置一个按钮或者其他交互方式，用于切换展示的图片。

6.在按钮的点击事件中，修改展示图片的索引值，从而实现图片的切换效果。

以下是示例代码：

<template>
  <div>
    <el-upload
      class="upload-demo"
      action="/upload"
      :show-file-list="false"
      :auto-upload="false"
      :on-change="handleChange"
    >
      <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
      <div v-for="(item, index) in fileList" :key="index">
        <img :src="item.url" alt="" />
      </div>
    </el-upload>
    <el-button @click="handlePrev">上一张</el-button>
    <el-button @click="handleNext">下一张</el-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      fileList: [], // 存储上传的图片信息
      currentIndex: 0 // 当前展示图片的索引值
    };
  },
  methods: {
    handleChange(file, fileList) {
      // 上传成功后将图片信息存储到fileList中
      this.fileList = fileList;
    },
    handlePrev() {
      // 切换到上一张图片
      if (this.currentIndex > 0) {
        this.currentIndex--;
      }
    },
    handleNext() {
      // 切换到下一张图片
      if (this.currentIndex < this.fileList.length - 1) {
        this.currentIndex++;
      }
    }
  }
};
</script>

el-upload上传的多个文件分两列展示

`el-upload` 是 Element UI 提供的一个用于文件上传的组件，在处理上传多个文件时，如果需要按照两列的方式展示，你可以结合 CSS 和 Vue 的动态绑定来实现。首先，你需要在模板上设置一个列表容器，并给每个上传项添加一个动态的 `v-for` 循环：

<template>
  <div class="upload-container">
    <el-upload
      :action="uploadUrl"
      :multiple="true"
      :on-success="handleSuccess"
      list-type="inline"
    >
      <el-button size="small">选择文件</el-button>
    </el-upload>

    <ul class="file-list">
      <li v-for="(file, index) in uploadedFiles" :key="index">
        <span>{{ file.name }}</span>
        <!-- 这里可以添加一个按钮或其他元素来控制显示/隐藏 -->
        <button @click="toggleColumns(index)">切换列</button>
        <transition name="fade">
          <p v-if="showTwoColumns[index]">{{ file.url }}</p>
        </transition>
      </li>
    </ul>
  </div>
</template>

然后，在你的样式(`styles`)或者单独的 CSS 文件中，你可以创建 `.file-list li` 的两个状态（如 `.column-1` 和 `.column-2`），并调整布局。

Vue 部分：

<script>
export default {
  data() {
    return {
      uploadUrl: '',
      uploadedFiles: [],
      showTwoColumns: [], // 初始时假设所有文件都显示在第一列
      toggleColumnsIndex: -1,
    };
  },
  methods: {
    handleSuccess(response, file) {
      this.uploadedFiles.push(file);
      this.showTwoColumns.push(this.toggleColumnsIndex >= 0); // 如果已有切换列操作，则改变对应文件的列
    },
    toggleColumns(index) {
      this.toggleColumnsIndex = index;
      this.showTwoColumns[index] = !this.showTwoColumns[index]; // 切换当前文件在两列中的位置
    },
  },
};
</script>

当用户点击“切换列”按钮时，`toggleColumns` 方法会被触发，改变指定索引对应的文件在 `showTwoColumns` 数组中的值，进而切换它的列显示效果。