Vue.js - 元素UI - 使用上传组件而不触发POST请求

Question

我正在使用Element UI的上传组件.遗憾的是,一旦上传文件就会触发POST请求.我的目标是将文件推送到一个空数组,该数组将在按钮后发布.

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

显然,你还需要设置auto-upload道具false.否则,它默认为true并且将自动尝试上传文件,即使您已为http-request道具指定了一个功能.

在你的情况下:

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

这是组件的文档.