el-upload手动上传

在 Vue 2 项目中，使用 el-upload 组件时，你可以通过监听 change 事件来获取文件的信息，而不立即上传文件。等到用户提交表单时，再手动处理文件上传。

1. 在 Vue 组件中使用 el-upload

<template>
  <div>
    <el-upload
      ref="upload"
      action="#"  <!-- 这里设置为 #，表示不上传 -->
      :auto-upload="false"  <!-- 关闭自动上传 -->
      :on-change="handleFileChange"  <!-- 监听文件变化 -->
      :limit="1"  <!-- 限制上传一个文件 -->
    >
      <el-button type="primary">选择文件</el-button>
    </el-upload>

    <el-button type="success" @click="handleSubmit">提交</el-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      fileList: [],  // 用于存储文件信息
    };
  },
  methods: {
    // 文件选择变化时的回调
    handleFileChange(file, fileList) {
      this.fileList = fileList;  // 更新文件列表
      console.log('文件信息:', file);
    },
    // 提交表单时的处理
    handleSubmit() {
      if (this.fileList.length === 0) {
        this.$message.warning('请先选择文件');
        return;
      }

      const file = this.fileList[0].raw;  // 获取文件对象
      console.log('提交的文件:', file);

      // 在这里处理文件上传逻辑
      // 例如：使用 axios 或其他方式上传文件
      // this.uploadFile(file);
    },
    // 文件上传逻辑
    uploadFile(file) {
      const formData = new FormData();
      formData.append('file', file);

      // 使用 axios 上传文件
      axios.post('/your-upload-endpoint', formData, {
        headers: {
          'Content-Type': 'multipart/form-data',
        },
      })
      .then(response => {
        console.log('上传成功:', response.data);
      })
      .catch(error => {
        console.error('上传失败:', error);
      });
    },
  },
};
</script>

2. 代码说明

• action="#": 设置 action 为 #，表示不上传文件到服务器。
• :auto-upload="false": 关闭自动上传，这样选择文件后不会立即上传。
• :on-change="handleFileChange": 监听文件变化，当用户选择文件时触发 handleFileChange 方法。
• handleFileChange: 在这个方法中，你可以获取到文件的信息，并将其存储在 fileList 中。
• handleSubmit: 当用户点击提交按钮时，你可以从 fileList 中获取文件信息，并进行上传操作。

3. 提交时上传文件

在 handleSubmit 方法中，你可以通过 this.fileList[0].raw 获取到文件对象，然后使用 axios 或其他方式将文件上传到服务器。

4. 注意事项

• 如果你需要上传多个文件，可以调整 :limit 属性，并在 handleSubmit 中处理多个文件的上传逻辑。
• 如果需要在上传时显示进度条或其他 UI 反馈，可以在 uploadFile 方法中添加相应的逻辑。