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>

Here's the documentation for the component.

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

1 个答案: