el-upload同时上传图片和文件

### 使用 `el-upload` 组件同时上传图片和文件

为了使 `el-upload` 能够处理不同类型的文件，包括图片和其他文档，在设置该组件时需考虑几个方面。首先，通过禁用自动上传功能来控制何时提交文件到服务器[^1]。

<template>
  <div id="app">
    <el-upload
      :auto-upload="false"
      action="#"
      multiple
      ref="uploadRef"
      :on-preview="handlePreview"
      :on-remove="handleRemove"
      :file-list="fileList"
      :before-upload="beforeUpload"
      accept=".jpg,.png,.pdf,.docx"
    >
      <el-button type="primary">点击上传</el-button>
    </el-upload>
    <el-button @click="submitUpload" style="margin-left: 10px;" type="success">上传至服务器</el-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      fileList: []
    };
  },
  methods: {
    submitUpload() {
      this.$refs.uploadRef.submit();
    },
    handlePreview(file) {
      console.log('preview:', file);
    },
    handleRemove(file, fileList) {
      console.log('remove:', file, fileList);
    },
    beforeUpload(file) {
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isLt2M) {
        this.$message.error('上传文件大小不能超过 2MB!');
      }
      return isLt2M;
    }
  }
};
</script>

上述代码展示了如何配置 `el-upload` 来接受多种格式的文件（如 `.jpg`, `.png`, `.pdf`, 和 `.docx`），并允许一次选择多个文件进行上传[^2]。这里还定义了一些事件处理器用于预览、移除以及验证即将上传的文件是否满足特定条件（比如最大尺寸限制）。最后，提供了一个按钮用来触发实际的上传操作而不是依赖默认行为立即发送请求给指定的动作URL。

当准备就绪可以真正向服务器发起POST请求之前，可以通过调用 `this.$refs.uploadRef.submit()` 方法手动启动整个过程。这使得可以在最终确认前做额外的数据整理或其他必要的准备工作[^3]。