this.$refs.upload.submit is not a function

Question

this.$refs.upload.submit is not a function

vue 动态el-tab-pane遇到el-upload出现问题

应该是ref不能写死

在动态el-tab-pane中该怎么去处理el-upload的问题 而且文件应该是区分的

Answer 1

该回答引用GPTᴼᴾᴱᴺᴬᴵ
根据您提供的代码片段，问题可能是由于this.$refs.upload返回了undefined，因此无法调用submit()函数。

您可以尝试在标签中添加ref属性，例如：

<el-upload class="upload-demo" ref="upload" multiple :accept="accept" action="" :with-credentials="true" :http-request="httpRequest" :on-change="fileChange" :file-list="fileList" :auto-upload="false">
  <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
  <div slot="tip" class="el-upload_tip" style="display: inline-block;margin-left: 20px"></div>
</el-upload>

然后在调用submit()函数之前，您可以添加一个条件检查，以确保this.$refs.upload不为undefined。例如：

if (this.$refs.upload) {
  this.$refs.upload.submit();
}

这样做可以确保submit()函数仅在this.$refs.upload存在时才被调用。

至于动态el-tab-pane中的问题，您可以尝试将ref属性设置为动态值，例如：

<el-upload :ref="'upload' + index" class="upload-demo" multiple :accept="accept" action="" :with-credentials="true" :http-request="httpRequest" :on-change="fileChange" :file-list="fileList" :auto-upload="false">

然后在调用submit()函数时，使用动态生成的ref属性值来访问组件，例如：

this.$refs['upload' + index].submit();

这样做可以确保每个组件都有唯一的ref属性值，可以正确地访问每个组件。

希望这些解决方案对您有所帮助！