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

you don't know how embarrassed I look right now. thank you. that solved it — user4481538
– user4481538, Commented Oct 5, 2017 at 20:51

thanksd · Accepted Answer · 2017-10-05 20:56:55Z

16

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.

answered Oct 5, 2017 at 20:56

thanksd

55.8k23 gold badges167 silver badges155 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user4481538 Over a year ago

I ended up taking out :http-request and just kept the :auto-upload. I just need to show the files anyway. thanks!

Collectives™ on Stack Overflow

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

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related