Vue.js - Element UI - Use upload component without POST request triggering

Question

I'm using the upload component of Element UI. It unfortunately triggers a POST request as soon as a file is uploaded. What I'm aiming for is to push the files to an empty array which would be posted after with button.

HTML

// Element UI documentation says http-request overrides xhr behavior
// so I can use my own file request. In this case, I wanted to use a method
// though I'm not quite sure about this part?
<el-upload
     action="",
     :http-request="addAttachment",
     :on-remove="deleteAttachment",
     :file-list="attachments">
     <el-button size="mini" type="primary">Add file</el-button>
</el-upload>

// button that uploads the files here

JS

data() {
     attachments: []
},

methods: {
     addAttachment ( file, fileList ) {
          this.attachments.push( file );
     },

     deleteAttachment () {
          // removes from array
     }
}

Answer 1

Apparently, you also need to set the auto-upload prop to be false. Otherwise, it defaults to true and will automatically try to upload the file even if you've specified a function for the http-request prop.

In your case:

<el-upload
  action="",
  :http-request="addAttachment",
  :auto-upload="false"
  :on-remove="deleteAttachment",
  :file-list="attachments"
>
  <el-button size="mini" type="primary">Add file</el-button>
</el-upload>

Here's the documentation for the component.