el-upload拖拽上传的部分点击哪都上传

`el-upload`组件是Element UI库中的一个用于文件上传的功能模块。在拖拽上传模式下，当你将文件直接从文件浏览器或桌面放到指定区域（通常是元素上），或者点击该区域并选择文件时，文件就会开始上传。默认情况下，这个区域通常是一个可以触发上传事件的区域，比如一个按钮或者一个图标，用户可以直接在其上操作。

如果你想要设置成无论点击哪里都能触发上传，你可以尝试配置`action`属性，使其脱离具体的DOM节点绑定，并监听全局的`drop`事件。例如：

<el-upload
  ref="upload"
  :action="'/api/upload'"
  drag
  drop
  @drop="handleDrop"
>
</el-upload>

<script>
export default {
  methods: {
    handleDrop(files) {
      this.$refs.upload.submit();
    }
  }
}
</script>

在这里，`drag`和`drop`属性表示它支持拖放上传，`@drop`事件会在文件被成功拖放到指定区域时触发。然后在方法里，你可以通过`submit`方法来处理上传逻辑。

相关问题

el-upload 拖拽进来跳转页面 切片上传视频

-up是一个基于m-ui的上传组件，可以实现文件上传的功能。切片上传是一种将大文件分割成多个小文件进行上传的方式，可以提高上传速度和稳定性。以下是实现拖拽进来跳转页面切片上传视频的步骤：\n\1. 首先需要安装m-ui和xios插件，可以使用pm命令进行安装。\n\2. 在vu组件中引入-up组件，并设置i属性为上传文件的地址，设置headers属性为上传文件的请求头部信息。\n\3. 设置-up组件的yp属性为rag，表示可以通过拖拽文件进行上传。\n\4. 设置-up组件的befor-up属性为一个方法，该方法会在上传文件之前被调用，可以在该方法中对上传的文件进行处理，例如将大文件分割成多个小文件。\n\5. 设置-up组件的-progress属性为一个方法，该方法会在文件上传过程中被调用，可以在该方法中实时更新文件上传的进度。\n\6. 设置-up组件的-success属性为一个方法，该方法会在文件上传成功后被调用，可以在该方法中进行上传成功后的操作，例如跳转页面。\n\7. 在vu组件中定义一个up方法，该方法会在-up组件的上传按钮被点击时被调用，可以在该方法中进行文件上传的操作。\n\8. 在vu组件中定义一个sliFi方法，该方法可以将大文件分割成多个小文件。\n\9. 在vu组件中定义一个mergFi方法，该方法可以将上传成功的多个小文件合并成一个大文件。\n\下面是示例代码：\n\```htm\<mp>\ <-up\ class=\up-dem\"\ drag\ acti=\http//hos300/up\"\ headers=\headers\"\ befor-up=\beforUp\"\ -progress=\Progress\"\ -success=\Success\">\ <i class=\-i-up\"></i>\ <iv class=\-up__x\">将视频拖拽到此处，或<m>点击上传</m></iv>\ </-up>\</mp>\n\<scrip>\impor axios from 'xios'\impor Messag } from 'm-ui'\n\xpor defau {\ () {\ retur {\ headers {\ 'C-Typ' 'multipar/form-'\ },\ fi nu,\ progress \ }\ },\ methods {\ beforUp(fi) {\ this.fi = fi\ this.sliFi()\ retur fals\ },\ Progress(ev, fi, fileLis) {\ this.progress = ev.per\ },\ onSuccess(respons, fi, fileLis) {\ if (respons. === ) {\ this.mergFi()\ this.$router.push('/success')\ } els {\ Messag.error(respons.messag)\ }\ },\ up() {\ this.$refs.up.submi()\ },\ sliFi() {\ // 将大文件分割成多个小文件\ },\ mergFi() {\ // 将上传成功的多个小文件合并成一个大文件\ }\ }\}\</scrip>\```\n\

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);
  }
}

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