Using the element-ui el-upload component, there are no requests on the page, but an error is reported.

problem: using the element-ui el-upload component, there are no requests on the page, but the page is reported to be blank by mistake

clipboard.png

Source code:

<template>
  <div class="app-container">
    <el-upload
      id="riskFile"
      ref="uploadFile"
      :auto-upload="false"
      :file-list="fileList"
      :http-request="uploadMethod"
      name="riskFile"
      multiple
      action="/test/upload"
    >
      <el-button slot="trigger" class="upload-title" type="primary"></el-button>
      <el-button class="upload-title" type="primary" @click="submitUpload">test</el-button>
    </el-upload>
  </div>
</template>

<script>
export default {
  data() {
    return {
      fileList: []
    }
  },
  methods: {
    submitUpload() {
      this.$refs.uploadFile.submit()
    },
    // 
    uploadMethod(item) {
      console.log(item)
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .sub-title{
    margin: 0 50px;
  }
</style>

is there a great god who can help us find out what went wrong? Thank you very much

Dec.21,2021

doesn't see what the error has to do with this component. Are you sure it was caused by adding el-upload ? You can try to remove el-upload from template and run


to see what's going on in this.$nextTick () in the parent component,

.
Menu