vue element手动上传文件

Vue Element UI 提供了`el-upload`组件用于文件上传，如果你想要手动触发文件选择而不是自动触发，可以使用`action`属性指定上传的URL，并设置`on-change`事件处理函数，在这个函数中添加文件的选择操作。

以下是基本的手动上传文件的步骤：

<template>
  <div>
    <el-upload
      ref="upload"
      :action="uploadUrl" // URL用于上传文件
      :on-change="handleChange" // 当用户选择文件后触发
      accept="application/pdf, image/*" // 可接受的文件类型
      :auto-upload="false" // 关闭默认上传行为，改为手动
    >
      <i class="el-icon-upload"></i> 手动上传
    </el-upload>
  </div>
</template>

<script>
export default {
  data() {
    return {
      uploadUrl: 'your/upload/api', // 替换为实际的文件上传接口地址
    };
  },
  methods: {
    handleChange(file) {
      if (file.status === 'success') { // 检查文件上传状态是否成功
        console.log('上传成功:', file.response); // 文件响应数据
      } else {
        alert('上传失败');
      }
      this.$refs.upload.submit(); // 手动触发上传
    },
  },
};
</script>

在这个例子中，当用户点击“手动上传”按钮后，会触发`handleChange`方法，然后你可以通过`submit()`方法提交文件到服务器。记得将`uploadUrl`替换为你的实际API地址，并根据需要处理上传结果。