elementUI中el-upload的使用以及遇到的坑（手动上传案例）

在Element UI中，el-upload 组件用于文件上传，它提供了很多功能，如自动上传、手动上传等。

以下是一个使用el-upload组件进行手动上传文件的例子：

<template>
  <el-upload
    ref="upload"
    :action="uploadUrl"
    :auto-upload="false"
    :on-success="handleSuccess"
    :on-error="handleError"
  >
    <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
    <el-button
      style="margin-left: 10px;"
      size="small"
      type="success"
      @click="submitUpload"
    >上传到服务器</el-button>
  </el-upload>
</template>
 
<script>
export default {
  data() {
    return {
      uploadUrl: '你的上传地址',
    };
  },
  methods: {
    submitUpload() {
      this.$refs.upload.submit();
    },
    handleSuccess(response, file, fileList) {
      console.log('文件上传成功');
    },
    handleError(err, file, fileList) {
      console.error('文件上传失败');
    },
  },
};
</script>

在这个例子中，:auto-upload 设置为 false 禁用了自动上传，需要手动触发上传动作。通过点击按钮触发 submitUpload 方法，从而调用 el-upload 的 submit 方法进行手动上传。

注意，你需要根据实际情况替换 :action 中的上传地址，并实现 handleSuccess 和 handleError 方法来处理上传成功和失败的情况。