el-upload拖拽上传不走before-upload

你好！关于el-upload的拖拽上传不走before-upload方法的问题，可能有几种原因导致。首先，确保你已经正确地设置了before-upload属性并指定了对应的方法。其次，检查一下你的代码是否正确，特别是before-upload方法的实现部分。

如果你确认这些方面都没有问题，那么可能是el-upload组件版本的问题。请确保你使用的是最新版本的el-upload组件，并查看它的文档，了解是否有相关的更新或者已知问题。

另外，你还可以尝试在el-upload组件上添加@dragover和@drop事件监听器，并在这些事件的处理方法中手动调用before-upload方法来实现拖拽上传前的逻辑。

希望能帮到你！如果还有其他问题，请随时提问。

相关问题

el-upload拖拽不符合类型的上传失败

### 解决 `el-upload` 组件拖拽上传文件时因类型不符导致的上传失败

当使用 `el-upload` 的拖拽功能时，如果指定的 `accept` 属性不匹配所拖拽的文件类型，则可能导致上传失败。为了确保不同类型的文件能够正常上传并处理不符合条件的情况，建议采取以下措施：

#### 设置合理的 `accept` 值
通过设置 `accept` 属性来限定允许上传的文件类型，并注意该属性对于大小写的敏感性。例如，要接受图片格式 `.jpg`, `.png` 和文档格式 `.pdf`，应如下配置[^3]:

<el-upload
    ...
    accept=".JPG,.PNG,.PDF,.jpg,.png,.pdf"
>
</el-upload>

#### 使用 `before-upload` 钩子函数过滤文件
利用 `before-upload` 方法可以在实际发送请求前对文件进行预检，从而阻止不符合规定的文件进入后续流程。此方法返回 false 或者 Promise.reject() 即可中断上传过程。

下面是一个简单的例子，它不仅验证了 MIME 类型还检查了文件扩展名以提高准确性：

function handleBeforeUpload(file){
    const validTypes = ['image/jpeg', 'application/pdf']; // 定义合法MIME Type集合
    
    let isValidTypeByExt = ['.jpg','.jpeg','.png','.pdf'].some(ext => {
        return file.name.toLowerCase().endsWith(ext);
    });

    if (!validTypes.includes(file.type) && !isValidTypeByExt ) { 
        this.$message.error('仅支持JPEG/PNG/PDF格式！');
        return false;
    }
    
    return true;  // 返回true继续执行默认行为；false则取消本次操作。
}

#### 提供友好的错误提示信息
为了让用户体验更佳，在检测到非法文件时给出清晰明了的信息反馈非常重要。可以通过 Element UI 自带的消息框组件 `$message` 来实现即时通知用户当前的操作状态以及可能存在的问题所在。

综上所述，针对 `el-upload` 拖拽上传过程中遇到的文件类型校验问题，除了正确设定 `accept` 参数外，还可以借助于前端逻辑控制进一步增强系统的健壮性和友好度。

el-upload 拖动上传图片成功但是成功回调不生效

可能是因为你没有在组件中正确绑定回调函数，或者回调函数中的代码有误。可以参考以下步骤进行排查：

1. 确保在组件中正确绑定了成功回调函数，例如：

<el-upload
  :on-success="handleSuccess"
>
...
</el-upload>

2. 确保回调函数中的代码没有问题，例如：

methods: {
  handleSuccess(response, file, fileList) {
    console.log(response);
  }
}

3. 确保后端接收到上传文件并返回了正确的响应。你可以在浏览器的开发者工具中查看网络请求和响应，确保上传成功并且响应中包含了需要的信息。

如果以上步骤都没有问题，那么可以考虑使用 `before-upload` 属性来进行调试，这样可以在上传之前打印出上传文件的信息，例如：

<el-upload
  :before-upload="handleBeforeUpload"
  :on-success="handleSuccess"
>
...
</el-upload>

methods: {
  handleBeforeUpload(file) {
    console.log(file);
    return true;
  },
  handleSuccess(response, file, fileList) {
    console.log(response);
  }
}

这样可以帮助你更好地定位问题。如果还有问题，请提供更多的相关代码和信息，方便我进行更准确的排查。